Heim > Artikel > Web-Frontend > Angular+RouterLink macht verschiedene ausgefallene Sprünge
Dieses Mal bringe ich Ihnen Angular+RouterLink, um verschiedene ausgefallene Sprünge zu machen. Das Folgende ist ein praktischer Fall Zeit.
VorwortZusätzlich zur Verwendung der navigation()-Methode des Routers zum Wechseln von Routen bietet Angular2 auch einen Befehl zum Konvertieren eines
DOM Das Objekt wird als Routing-Eintrag erweitert: Die @View({
directives:[RouterOutlet,RouterLink]
template : `<nav>
<b router-link="video">video</b> |
<b router-link="music">music</b>
</nav>
<router-outlet></router-outlet>`
})
RouterLink-Direktive fügt dem Host-DOM-Objekt einen Click
-Listener hinzu und ruft bei Auslösung die navigation()-Methode des Routers für das Routing auf . In diesem Artikel werden jedoch hauptsächlich die relevanten Inhalte zu Angulars RouterLink Fancy Jump vorgestellt. Ich werde im Folgenden nicht viel sagen.
routerLink selbst unterstützt zwei Schreibmethoden: <a routerLink="detail">
</a>
<a [routerLink]="['detail']">
</a>
Welche Schreibmethoden gibt es für den Wert von routerLink und was sind die Unterschiede?
Angenommen, die aktuelle Route ist
`http://localhost:4200/#/doc/license`Schreiben 1: Absoluter Pfad / + Routenname
<!--跳到 http://localhost:4200/#/doc/license -->
<a [routerLink]="['/doc/demo']" >跳呀跳</a>
<!--跳到 http://localhost:4200/#/demo -->
<a [routerLink]="['/demo']" >跳呀跳</a>
Dann ist die URL
http: Springe zu //localhost:4200/#/doc/demo, also http://localhost:4200/#/ + der absolute Pfad, zu dem du springen möchtest.
Schreiben 2: Ein Routing-Name Routing-Name <a [routerLink]="['demo']" >跳呀跳</a>
Dann ist die URL http://localhost:4200/#/doc/license/(demo), was ist http://localhost:4200/#/doc/license + der absolute Pfad, zu dem Sie springen möchten. Zu diesem Zeitpunkt wird Ihrer Route etwas hinzugefügt, das zu /(demo) wird, und der Sprung funktioniert nicht.
<a [routerLink]="['../demo']" >跳呀跳</a>
Dann ist die URL
http://localhost:4200/#/doc /demo, das ist http://localhost:4200/#/doc + der relative Pfad, zu dem Sie springen möchten. Es beginnt mit der Betrachtung der vorherigen Ebene.
Schreibmethode 4: ./Routenname, also die aktuelle Route + die Route, zu der Sie springen möchten <a [routerLink]="['./demo']" >跳呀跳</a>
Ich glaube, Sie haben die Methode danach gemeistert Lesen Sie den Fall in diesem Artikel. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Detaillierte Erläuterung der Schritte zur Implementierung der Schneeflocken-Fallanimation in JSSo implementieren Sie den Port Wiederverwendungsfunktion in Node.JsDas obige ist der detaillierte Inhalt vonAngular+RouterLink macht verschiedene ausgefallene Sprünge. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!