Passive Verbindung in Winkel 2 - <a href=""> Äquivalent

In Angular 1.x kann ich Folgendes tun, um einen Link zu erstellen, der im Grunde nichts bewirkt:

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

Das gleiche Tag navigiert jedoch in Angular 2 zur App-Basis. Was entspricht dem in Angular 2?

Bearbeiten: Es sieht aus wie ein Fehler im Angular 2 Router und jetzt gibt es ein offenes Problem auf Github darüber.

Ich suche nach einer sofort einsatzbereiten Lösung oder einer Bestätigung, dass es keine geben wird.

Wenn Sie Angular 5 oder höher haben, ändern Sie einfach

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

in

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

Ein Link wird mit einem Handsymbol angezeigt, wenn Sie mit der Maus darüber fahren und darauf klicken, wird keine Route ausgelöst.

Hinweis: Wenn Sie die Abfrageparameter beibehalten möchten, sollten Sie die queryParamsHandlingOption auf Folgendes setzen preserve:

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

Das wird das gleiche sein, es hat nichts damit zu tun angular2. Es ist ein einfaches HTML-Tag.

Grundsätzlich wird das a(Anker-) Tag vom HTML-Parser gerendert.

Bearbeiten

Sie können dies deaktivieren, hrefindem Sie darauf klicken, javascript:void(0)damit nichts darauf passiert. (Aber es ist Hack). Ich weiß, dass Angular 1 diese Funktionalität sofort bereitgestellt hat, was mir jetzt nicht richtig erscheint.

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

Plunkr

Ein anderer Weg könnte die Verwendung einer routerLinkDirektive mit übergebenem ""Wert sein, die schließlich ein Leerzeichen erzeugthref=""

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

Es gibt Möglichkeiten, dies mit angle2 zu tun, aber ich bin nicht der Meinung, dass dies ein Fehler ist. Ich bin nicht mit angular1 vertraut, aber dies scheint ein wirklich falsches Verhalten zu sein, obwohl es, wie Sie behaupten, in einigen Fällen nützlich ist, aber dies sollte eindeutig nicht das Standardverhalten eines Frameworks sein.

Abgesehen von Meinungsverschiedenheiten können Sie eine einfache Anweisung schreiben, die alle Ihre Links erfasst und nach hrefInhalten sucht. Wenn die Länge 0 beträgt, die Sie ausführen preventDefault(), finden Sie hier ein kleines Beispiel.

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

Sie können es für Ihre Anwendung funktionsfähig machen, indem Sie diese Anweisung in PLATFORM_DIRECTIVES hinzufügen

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

Hier ist ein Beispiel mit einem Beispiel.

Ein Anker sollte zu etwas navigieren, also denke ich, dass das Verhalten beim Routen korrekt ist. Wenn Sie es brauchen, um etwas auf der Seite umzuschalten, ist es eher wie eine Schaltfläche? Ich benutze Bootstrap, damit ich Folgendes verwenden kann:

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

Ich verwende diese Problemumgehung mit 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>

Hoffe das hilft

Simeyla-Lösung :

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

Eine wirklich einfache Lösung besteht darin, kein A-Tag zu verwenden. Verwenden Sie stattdessen eine Spanne:

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

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

Hier ist ein einfacher Weg

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

Nehmen Sie das sprudelnde Ereignis auf und schießen Sie es ab

Hier sind einige Möglichkeiten, dies zu tun:

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

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

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

In meinem Fall löscht das Löschen des href-Attributs das Problem, solange eine Klickfunktion vorhanden ist, die a zugewiesen wird.

Sie haben das Standardverhalten des Browsers verhindert. Sie müssen jedoch keine Direktive erstellen, um dies zu erreichen.

Es ist einfach wie im folgenden Beispiel:

my.component.html

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

my.component.ts

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

Aktualisiert für 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();
    }
  }
}

Ich habe 4 Lösungen für Dummy-Anker-Tag.

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

4. Wenn Sie Bootstrap verwenden:

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

Ich frage mich, warum niemand routerLink und routerLinkActive (Angular 7) vorschlägt.

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

Ich habe die href entfernt und benutze sie jetzt. Bei Verwendung von href wurde die Basis-URL aufgerufen oder dieselbe Route erneut geladen.

Sie müssen das Standardverhalten des Ereignisses wie folgt verhindern.

In HTML

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

In ts-Datei

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

Aktualisiert für 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();
        }
    }
}

Verwenden von

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

Wirklich einfache Lösung ist (click)="(null)"

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