it-swarm.com.de

Passiver Link in Angular 2 - <a href=""> Entsprechung

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

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

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

Edit: Es sieht aus wie ein Fehler im Angular 2 Router und jetzt gibt es ein offenes Problem) on github darüber.

Ich suche eine Out-of-the-Box-Lösung oder eine Bestätigung, dass es keine geben wird.

106
s.alem

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 den Mauszeiger darüber halten und darauf klicken, wird keine Route ausgelöst.

131
Emiel Koning

Das wird auch so sein, es hat nichts mit angular2 Zu tun. Es ist einfach HTML-Tag.

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

Bearbeiten

Sie können dieses href deaktivieren, indem Sie javascript:void(0) darauf haben, damit nichts darauf passiert. (Aber es ist Hack). Ich weiß, dass Angular 1 diese Funktionalität sofort zur Verfügung gestellt hat, was mir jetzt nicht richtig erscheint.

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

Plunkr


Eine andere Möglichkeit ist die Verwendung der routerLink -Direktive mit dem Übergeben des "" - Werts, wodurch schließlich ein leerer href="" - Wert generiert wird.

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

Es gibt Möglichkeiten, dies mit angular2 zu tun, aber ich bin mir nicht einig, dass dies ein Fehler ist. Angular1 ist mir nicht vertraut, aber dies scheint ein wirklich falsches Verhalten zu sein, auch wenn Sie behaupten, dass es 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 den Inhalt von href überprüft. Wenn die Länge 0 ist, führen Sie preventDefault() aus, 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 die gesamte Anwendung verwenden, indem Sie diese Direktive in PLATFORM_DIRECTIVES hinzufügen

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

Hier ist ein plnkr mit einem funktionierenden Beispiel.

21
Eric Martinez

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 das benutzen kann:

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

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

10
Sabri Aziri

Simeyla-Lösung :

<a href="#" (click)="foo(); false">
<a href="" (click)="false">
7
ali-myousefi

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

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

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

Hier ist ein einfacher Weg

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

nimm das sprudelnde Ereignis auf und schieße es ab

4
born2net

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

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>

In meinem Fall lösche ich das href-Attribut, um das Problem zu lösen, solange es eine Klickfunktion gibt, die einem zugewiesen ist.

3

Sie haben das Standard-Browserverhalten verhindert. Sie müssen jedoch keine Richtlinie erstellen, um dies zu erreichen.

Das folgende Beispiel macht es Ihnen leicht:

my.component.html

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

my.component.ts

goToPage(pageIndex, event) {
  event.preventDefault();
  console.log(pageIndex);
}
2
Michael Kühnel

Hier sind alle Möglichkeiten, dies im Angular2 + -Kontext zu tun:

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

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

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

2
Sal

Ich frage mich, warum niemand RouterLink und RouterLinkActive vorschlägt (Angular 7)

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

Ich entfernte das href und benutze dieses jetzt. Bei Verwendung von href wurde die Basis-URL aufgerufen oder dieselbe Route erneut geladen.

1
Monster Brain

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

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

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

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

0
grigson

sie können stattdessen javascript:; im Attribut href routerLink = "" hinzufügen

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

benutze routerLink = "" habe ein Problem während du auf einer anderen Seite bist.

0