Link pasywny w Angular 2 - odpowiednik <a href=etooth”>

W Angular 1.x mogę wykonać następujące czynności, aby utworzyć łącze, które w zasadzie nic nie robi:

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

Ale ten sam znacznik przechodzi do bazy aplikacji w Angular 2. Jaki jest odpowiednik tego w Angular 2?

Edycja: Wygląda na błąd w routerze Angular 2, a teraz jest otwarty problem na ten temat na githubie .

Szukam rozwiązania po wyjęciu z pudełka lub potwierdzenia, że ​​nie będzie.

Jeśli masz Angular 5 lub nowszy, po prostu zmień

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

w

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

Łącze zostanie wyświetlone z ikoną dłoni, gdy najedziesz na nie kursorem, a kliknięcie go nie uruchomi żadnej trasy.

Uwaga: Jeśli chcesz zachować parametry zapytania, ustaw queryParamsHandlingopcję na preserve:

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

To będzie to samo, nie ma z tym nic związanego angular2. To prosty tag html.

Zasadniczo atag (kotwica) będzie renderowany przez parser HTML.

Edytować

Możesz to wyłączyć, hrefmając javascript:void(0)na nim, aby nic się z nim nie działo. (Ale to hack). Wiem, że Angular 1 dostarczył tę funkcję od razu po wyjęciu z pudełka, co nie wydaje mi się teraz poprawne.

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

Plunkr

Inaczej można by użyć routerLinkdyrektywy z przekazaniem ""wartości, która ostatecznie wygeneruje wartość pustąhref=""

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

Istnieją sposoby na zrobienie tego z angular2, ale zdecydowanie nie zgadzam się, że jest to błąd. Nie jestem zaznajomiony z angular1, ale wydaje mi się, że jest to naprawdę niewłaściwe zachowanie, mimo że według Ciebie jest przydatne w niektórych przypadkach, ale wyraźnie nie powinno to być domyślne zachowanie żadnego frameworka.

Pomijając nieporozumienia, możesz napisać prostą dyrektywę, która pobierze wszystkie linki i sprawdzi hrefich zawartość, a jeśli jej długość wynosi 0, wykonujesz ją preventDefault(), oto mały przykład.

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

Możesz sprawić, że będzie działać w całej aplikacji, dodając tę ​​dyrektywę w PLATFORM_DIRECTIVES

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

Oto plnkr z działającym przykładem.

Achor powinien prowadzić do czegoś, więc wydaje mi się, że zachowanie jest prawidłowe, gdy kieruje. Jeśli potrzebujesz go do przełączania czegoś na stronie, to bardziej przypomina przycisk? Używam bootstrap, więc mogę użyć tego:

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

Używam tego obejścia z 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>

Mam nadzieję że to pomoże

rozwiązanie Simeyla :

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

Naprawdę prostym rozwiązaniem nie jest użycie tagu A - zamiast tego użyj span:

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

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

Oto prosty sposób

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

uchwycić bulgotanie i zestrzelić

Oto kilka sposobów, aby to zrobić:

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

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

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

W moim przypadku usunięcie atrybutu href rozwiązuje problem, o ile istnieje przypisana funkcja kliknięcia do pliku.

Zablokowałeś domyślne zachowanie przeglądarki. Ale nie musisz tworzyć dyrektywy, aby to osiągnąć.

Jest to proste, jak na poniższym przykładzie:

my.component.html

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

my.component.ts

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

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

Mam 4 rozwiązania dla atrapy zawieszki.

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

4. Jeśli używasz bootstrap:

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

Zastanawiam się, dlaczego nikt nie sugeruje routerLink i routerLinkActive (Angular 7)

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

Usunąłem href i teraz używam tego. Podczas korzystania z href powodowało to przechodzenie do podstawowego adresu URL lub ponowne ładowanie tej samej trasy.

musisz zapobiec domyślnemu zachowaniu zdarzenia w następujący sposób.

W html

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

W pliku ts

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

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

Za pomocą

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

Naprawdę prostym rozwiązaniem jest (click)="(null)"

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