Angular 2의 수동 링크-<a href=“”> 동등

Angular 1.x에서는 기본적으로 아무것도하지 않는 링크를 만들기 위해 다음을 수행 할 수 있습니다.

<a href="">My Link</a>

그러나 동일한 태그는 Angular 2의 앱 기반으로 이동합니다. Angular 2와 동일한 태그는 무엇입니까?

편집 : Angular 2 Router의 버그처럼 보이며 이제 github 에 공개 문제 가 있습니다.

즉시 사용 가능한 솔루션이나 아무것도 없다는 확인을 찾고 있습니다.

Angular 5 이상인 경우 변경하십시오.

<a href="" (click)="passTheSalt()">Click me</a>

으로

<a [routerLink]="" (click)="passTheSalt()">Click me</a>

링크 위로 마우스를 가져 가면 링크가 손 아이콘으로 표시되며 클릭하면 경로가 실행되지 않습니다.

참고 : 쿼리 매개 변수를 유지하려면 queryParamsHandling옵션을 preserve다음으로 설정해야 합니다 .

<a [routerLink]=""
   queryParamsHandling="preserve"
   (click)="passTheSalt()">Click me</a>

동일합니다 angular2.에 관련된 내용이 없습니다 . 간단한 html 태그입니다.

기본적으로 a(앵커) 태그는 HTML 파서에 의해 렌더링됩니다.

편집하다

당신은 그것을 해제 할 수 있습니다 href함으로써 javascript:void(0)아무것도 그것에 일어나지 않도록 그 위에. (하지만 해킹). Angular 1 이이 기능을 기본적으로 제공한다는 것을 알고 있습니다.

<a href="javascript:void(0)" >Test</a>

플 런커

다른 방법으로 값을 routerLink전달하는 지시문을 사용하여 ""결국 공백을 생성 할 수 있습니다.href=""

<a routerLink="" (click)="passTheSalt()">Click me</a>

angular2를 사용하는 방법이 있지만 이것이 버그라는 것에 동의하지 않습니다. 나는 angular1에 익숙하지 않지만, 어떤 경우에는 유용하다고 주장하더라도 이것은 실제로 잘못된 행동처럼 보이지만 분명히 이것은 어떤 프레임 워크의 기본 행동이 아니어야합니다.

의견 불일치를 제외하고 모든 링크를 잡고 href내용을 확인하는 간단한 지시문을 작성할 수 있으며 그 길이가 0 인 preventDefault()경우 여기에 약간의 예가 있습니다.

@Directive({
  selector : '[href]',
  host : {
    '(click)' : 'preventDefault($event)'
  }
})
class MyInhertLink {
  @Input() href;
  preventDefault(event) {
    if(this.href.length == 0) event.preventDefault();
  }
}

PLATFORM_DIRECTIVES에이 지시문을 추가하여 애플리케이션 전체에서 작동하도록 만들 수 있습니다.

bootstrap(App, [provide(PLATFORM_DIRECTIVES, {useValue: MyInhertLink, multi: true})]);

다음 은 예제가 작동 하는 plnkr 입니다.

앵커는 무언가를 탐색해야하므로 경로가 올 때 동작이 올바른 것 같습니다. 페이지에서 무언가를 토글 해야하는 경우 버튼과 더 비슷합니까? 부트 스트랩을 사용하여 다음을 사용할 수 있습니다.

<button type="button" class="btn btn-link" (click)="doSomething()">My Link</button>

이 해결 방법을 CSS와 함께 사용하고 있습니다.

/*** Angular 2 link without href ***/
a:not([href]){
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    user-select: none
}

html

<a [routerLink]="/">My link</a>

도움이 되었기를 바랍니다

simeyla 솔루션 :

<a href="#" (click)="foo(); false">
<a href="" (click)="false">

정말 간단한 해결책은 A 태그를 사용하지 않는 것입니다. 대신 span을 사용하십시오.

<span class='link' (click)="doSomething()">Click here</span>

span.link {
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}

여기 간단한 방법이 있습니다

  <div (click)="$event.preventDefault()">
            <a href="#"></a>
   </div>

버블 링 이벤트를 캡처하고 격추

몇 가지 방법이 있습니다.

• <a href="" (click)="false">Click Me</a>

• <a style="cursor: pointer;">Click Me</a>

• <a href="javascript:void(0)">Click Me</a>

필자의 경우 href 함수를 삭제하면 클릭 기능이 할당되어있는 한 문제가 해결됩니다.

기본 브라우저 동작을 방지했습니다. 그러나이를 달성하기 위해 지시문을 작성할 필요는 없습니다.

다음 예제와 같이 쉽습니다.

my.component.html

<a href="" (click)="goToPage(pageIndex, $event)">Link</a>

my.component.ts

goToPage(pageIndex, event) {
  event.preventDefault();
  console.log(pageIndex);
}

Angular 5 용으로 업데이트

import { Directive, HostListener, Input } from '@angular/core';

@Directive({
  // tslint:disable-next-line:directive-selector
  selector : '[href]'
})
export class HrefDirective {
  @Input() public href: string | undefined;

  @HostListener('click', ['$event']) public onClick(event: Event): void {
    if (!this.href || this.href === '#' || (this.href && this.href.length === 0)) {
      event.preventDefault();
    }
  }
}

더미 앵커 태그에 대한 4 가지 솔루션이 있습니다.

    1. <a style="cursor: pointer;"></a>
    2. <a href="javascript:void(0)" ></a>
    3. <a href="current_screen_path"></a>

4. 부트 스트랩을 사용하는 경우 :

<button class="btn btn-link p-0" type="button" style="cursor: pointer"(click)="doSomething()">MY Link</button>

아무도 아무도 routerLink와 routerLinkActive를 제안하지 않는지 궁금합니다 (Angular 7)

<a [routerLink]="[ '/resources' ]" routerLinkActive="currentUrl!='/resources'">

나는 href를 제거하고 지금 이것을 사용하고 있습니다. href를 사용할 때 기본 URL로 이동하거나 동일한 경로를 다시로드했습니다.

다음과 같이 이벤트의 기본 동작을 방지해야합니다.

HTML에서

<a href="" (click)="view($event)">view</a>

TS 파일에서

view(event:Event){
 event.preventDefault();
 //remaining code goes here..
}

Angular2 RC4 용으로 업데이트 :

import {HostListener, Directive, Input} from '@angular/core';

@Directive({
    selector: '[href]'
})
export class PreventDefaultLinkDirective {

    @Input() href;
    @HostListener('click', ['$event']) onClick(event) {this.preventDefault(event);}

    private preventDefault(event) {
        if (this.href.length === 0 || this.href === '#') {
            event.preventDefault();
        }
    }
}

사용

bootstrap(App, [provide(PLATFORM_DIRECTIVES, {useValue: PreventDefaultLinkDirective, multi: true})]);

정말 간단한 해결책은 (click)="(null)"

<a class="btn btn-default" (click)="(null)">Default</a>