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.
<a>
ohne "html" versucht ?a
Tags einen Zeiger zuweisen kann . Aber das sieht hacky aus.Antworten:
Wenn Sie Angular 5 oder höher haben, ändern Sie einfach
in
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
queryParamsHandling
Option auf Folgendes setzenpreserve
:quelle
[routerLink]=""
es wird als<a href="null" (click)="myFunction()">My Link</a>
Angular 5 in Chrome 64[routerLink]=""
/href="null"
arbeitet in IE 11[routerLink]=""
wird der Text Click me nicht als Link angezeigt und zeigt kein Handcursorsymbol an .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,
href
indem 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.Plunkr
Ein anderer Weg könnte die Verwendung einer
routerLink
Direktive mit übergebenem""
Wert sein, die schließlich ein Leerzeichen erzeugthref=""
quelle
#
inneren Ankershref
dieAngular1
Route beeinflussen kann. Kann Sie zur Standardseite senden (falls vorhanden)#
in Winkel 1.x. Ich möchte einen Link, der in angle2 nichts bewirkt, genau wiehref=""
in angle 1.x.<a href="">My Link</a>
wird das machen..aber was passiert aktuell damit?href="javascript:void(0);"
Funktioniert jedoch für mich.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
href
Inhalten sucht. Wenn die Länge 0 beträgt, die Sie ausführenpreventDefault()
, finden Sie hier ein kleines Beispiel.Sie können es für Ihre Anwendung funktionsfähig machen, indem Sie diese Anweisung in PLATFORM_DIRECTIVES hinzufügen
Hier ist ein Beispiel mit einem Beispiel.
quelle
pointer-events
ist 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.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:
quelle
Ich verwende diese Problemumgehung mit CSS:
html
Hoffe das hilft
quelle
styles.css
Datei des Angular-Projekts einfügen, und es wird hervorragend funktionieren!Simeyla-Lösung :
quelle
Eine wirklich einfache Lösung besteht darin, kein A-Tag zu verwenden. Verwenden Sie stattdessen eine Spanne:
quelle
button
Element, falls SiedoSomething
auf der Seite möchten .<button>
Elemente lösen standardmäßig einen Klick aus, wenn diespace
Taste gedrückt wird. Die Verwendungspan
(oder<a>
) entfernt diese Funktion - so dass Tastaturaktionen nicht wie erwartet funktionierenHier ist ein einfacher Weg
Nehmen Sie das sprudelnde Ereignis auf und schießen Sie es ab
quelle
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>
quelle
In meinem Fall löscht das Löschen des href-Attributs das Problem, solange eine Klickfunktion vorhanden ist, die a zugewiesen wird.
quelle
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
my.component.ts
quelle
Aktualisiert für Angular 5
quelle
Ich habe 4 Lösungen für Dummy-Anker-Tag.
4. Wenn Sie Bootstrap verwenden:
quelle
Ich frage mich, warum niemand routerLink und routerLinkActive (Angular 7) vorschlägt.
Ich habe die href entfernt und benutze sie jetzt. Bei Verwendung von href wurde die Basis-URL aufgerufen oder dieselbe Route erneut geladen.
quelle
Sie müssen das Standardverhalten des Ereignisses wie folgt verhindern.
In HTML
In ts-Datei
quelle
Aktualisiert für Angular2 RC4:
Verwenden von
quelle
Wirklich einfache Lösung ist
(click)="(null)"
<a class="btn btn-default" (click)="(null)">Default</a>
quelle