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>

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

---

동일합니다 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>

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

---

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

---

I have 4 solutions for dummy anchor tag.

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

4.If you are using bootstrap:

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

---

In my case deleting href attribute solve problem as long there is a click function assign to a.

---

You have prevent the default browser behaviour. But you don’t need to create a directive to accomplish that.

It’s easy as the following example:

my.component.html

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

my.component.ts

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

---

Here are all the ways to do it within the Angular2+ context:

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

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

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

---

I wonder why no one is suggesting routerLink and routerLinkActive (Angular 7)

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

I removed the href and now using this. When using href, it was going to the base url or reloading the same route again.

---

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

Using

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

---

Really simple solution is (click)="(null)"

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

---

you can add javascript:; in attribute href instead routerLink=""

<a href="javascript:;" *ngIf="item.submenu" class="m-menu__link m-menu__toggle"> some link </a>

use routerLink = "" have an issue while you in another page.

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