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


140

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.


Das kannst du immer noch. Es ist nur HTML. Irgendeine besondere Verwendung dafür?
Sasxa

Ja, es ist immer noch gültiges HTML, aber der Effekt ist bei Angular 1.x nicht der gleiche.
s.alem

1
Hast du es gerade <a>ohne "html" versucht ?
Sasxa

3
Ja, aber der Browser behandelt es nicht auf die gleiche Weise. Ich weiß, dass ich dh den Cursoreffekt mit CSS überschreiben und allen aTags einen Zeiger zuweisen kann . Aber das sieht hacky aus.
Uhr

3
Meine Meinung ist, dass ng1 Weg der falsche Weg war (: Standardverhalten sollte sein, wie es in Standard-HTML ist ...
Sasxa

Antworten:


187

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>

2
Dies funktionierte [routerLink]=""es wird als <a href="null" (click)="myFunction()">My Link</a>Angular 5 in Chrome 64
gerendert

3
Ich kann das gleiche bestätigen [routerLink]=""/ href="null"arbeitet in IE 11
Zymotik

1
<a [routerLink weibl .="" (click)="passTheSalt()"> Click me </a> funktioniert in angle7. Ich sehe, dass <a (click)="passTheSalt()"> Click me </a> ohne routerLInk auch in angle7 funktioniert. Was ist der bessere Weg, um eine passive Ankerverbindung mit [routerLink] oder ohne routerLink herzustellen?
Ian Poston Framer

1
@IanPostonFramer Beim Entfernen [routerLink]=""wird der Text Click me nicht als Link angezeigt und zeigt kein Handcursorsymbol an .
Emiel Koning

5
HINWEIS: Dadurch werden Ihre URL-Parameter zurückgesetzt. Käufer aufgepasst.
Stavm

88

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>

@ s.alem was auch immer Sie sagen, dass das Vorhandensein eines #inneren Ankers hrefdie Angular1Route beeinflussen kann. Kann Sie zur Standardseite senden (falls vorhanden)
Pankaj Parkar

Ich kenne die Wirkung von #in Winkel 1.x. Ich möchte einen Link, der in angle2 nichts bewirkt, genau wie href=""in angle 1.x.
s.alem

@ s.alem also <a href="">My Link</a>wird das machen..aber was passiert aktuell damit?
Pankaj Parkar

1
[routerLink] = "" entfernt Abfrageparameter von Ihrer Route. Dies ist wahrscheinlich nicht das, was Sie wollen. Sie könnten die Abfrageparameter beibehalten verwenden, aber dies scheint zu weit zu gehen
narthur157

2
Option 1: href="javascript:void(0);"Funktioniert jedoch für mich.
Paul Carlton

21

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.


Upvote für eine globale, eckige Lösung, aber ich akzeptiere sie nicht als die richtige Antwort, da ich, wie gesagt, nur nach einer Out-Box-Lösung suche, bis sie bestätigt, dass es keine gibt oder bis ich sie wirklich wirklich brauche es. Trotzdem vielen Dank.
Uhr

2
Das Problem mit pointer-eventsist die mangelnde Unterstützung mit IE ( caniuse ) (ich kann es sogar mit IE11 seltsamerweise umgehen), und es verhindert nicht, auf den Link von der Konsole zu klicken . Ich habe die @ Pankaj-Antwort positiv bewertet, weil sie aus meiner Sicht die einfachste ist. Meine Antwort ist nur eine Möglichkeit, dies mit angle2 zu tun. Ich könnte es einfacher machen, aber die CSS-Selektoren sind begrenzt.
Eric Martinez

1
Dies scheint Bootstrap Tab Links zu brechen (wie <a href="#tab-id">)
xd6_

In welchem ​​Modul befindet sich die Bootstrap-Funktion?
Jun711

16

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>

1
Ich mag diese Lösung. Wenn der Cursor eine Hand anzeigen soll, fügen Sie style = "cursor: pointer" hinzu.
Newman

In vielen Situationen ist eine gute Lösung jedoch zu beachten, dass die Schaltfläche größere Abmessungen hat als nur der textbasierte Anker.
Yankee

@yankee Sie können das in CSS ändern, aber ich empfehle nicht ... Tatsache ist, ein Button ist ein Button und ein Link ist ein Link ... zu traurig, dass das Web nicht so weiß oder schwarz ist.
Ayyash

11

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


1
Dies ist eine bessere Lösung, da hauptsächlich ein visueller Effekt fehlt. Sie können dieses CSS in die Top-Level- styles.cssDatei des Angular-Projekts einfügen, und es wird hervorragend funktionieren!


5

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

Sie sollten das nicht im Sinne eines sematischen Markups tun. Verwenden Sie ein buttonElement, falls Sie doSomethingauf der Seite möchten .
Michael Kühnel

<button>Elemente lösen standardmäßig einen Klick aus, wenn die spaceTaste gedrückt wird. Die Verwendung span(oder <a>) entfernt diese Funktion - so dass Tastaturaktionen nicht wie erwartet funktionieren
Drenai

4

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


Warum nicht den Anker selbst verwenden, um das Standardverhalten zu verhindern? Wie hier beschrieben: stackoverflow.com/a/44465069/702783 Scheint mir weniger »hacky«.
Michael Kühnel

4

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>


3

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


3

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

3

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

3

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>

0

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.


0

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..
}

-1

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

-1

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

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


Vielleicht ein Kommentar, warum solche Technik schlecht ist?
Grigson

1
Klick überall im Code zu schreiben, wenn Sie keinen Klick wollen, ist schlecht
Jens Alenius

2
Aber genau das möchte ich tun: Markieren Sie die Stelle im Code als "nichts auf Klick" -fähig, unterstützen Sie jedoch die neue Syntax. Konstruktionen wie onclick = "javascript: void" sind wirklich hässlich. Und href = "#" sind unzuverlässig, da sie Ihr Ansichtsfenster nach oben springen können. Also kann ich keine besseren Alternativen sehen
Grigson

Ich mag deine Lösung. Danke dir.
Mai Hữu Lợi

Überprüfen Sie meine neue Antwort. Wenn Sie nicht möchten, dass der Anker durch eine Schaltfläche navigiert, geben Sie "Typ" ein
Jens Alenius,
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.