Angular 2의 패시브 링크 - 등가

Angular 2의 패시브 링크 - 등가

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>

이것이 도움이 되길 바랍니다.

시밀라 용액:

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

다음은 몇 가지 방법입니다.

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

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

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

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

다음과 같은 예로 쉽게 사용할 수 있습니다.

my.component.component.cisco

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

my.component.ts

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

나는 더미 앵커 태그에 대한 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>

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

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

부글부글 끓고 있는 사건을 포착하여 격추시킵니다.

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();
    }
  }
}

사람들이 사용을 제안하는 이유를 잘 모르겠습니다.routerLink=""Angular 11에서 저는 내비게이션을 작동시킵니다.이것이 제게 맞는 일입니다.

<div class="alert">No data yet, ready to <a href="#" (click)="create();$event.preventDefault()">create</a>?</div>

나의 경우 href 속성을 삭제하면 a에 click 함수가 할당되는 한 문제가 해결됩니다.

정말 간단한 해결책은 A 태그를 사용하지 않고 대신 스팬을 사용하는 것입니다.

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

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

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

HTML에서

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

ints 파일

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

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

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

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

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})]);

언급URL : https://stackoverflow.com/questions/35639174/passive-link-in-angular-2-a-href-equivalent