Zusammenfassung der Angular+Routerlink-Sprungmethoden

Dieses Mal werde ich Ihnen eine Zusammenfassung der Angular+Routerlink-Sprungmethode geben. Was sind die Vorsichtsmaßnahmen in der Zusammenfassung der Angular+Routerlink-Sprungmethode?

Vorwort

Zusätzlich zur Verwendung der navigation()-Methode des Routers zum Wechseln von Routen bietet Angular2 auch einen Befehl dazu Erweitern Sie ein DOM-Objekt zu einem Routing-Eintrag: 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-Anweisung fügt dem Host-DOM-Objekt einen Click-Ereignis-Listener hinzu und ruft die Navigate()-Methode von auf Router, wenn Routing ausgelöst wird.

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]="[&#39;detail&#39;]">
</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]="[&#39;/doc/demo&#39;]" >跳呀跳</a>
 
 <!--跳到 http://localhost:4200/#/demo -->
 <a [routerLink]="[&#39;/demo&#39;]" >跳呀跳</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]="[&#39;demo&#39;]" >跳呀跳</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.

Schreiben 3: relativer Pfad../Routenname

 <a [routerLink]="[&#39;../demo&#39;]" >跳呀跳</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 geschrieben haben, um zu springen

 <a [routerLink]="[&#39;./demo&#39;]" >跳呀跳</a>

Dann lautet die URL

http://localhost:4200/#/doc/license/demo, also http://localhost:4200/#/doc/license + der relative Pfad, zu dem Sie springen möchten. Es sucht nach dieser passenden Route und springt von der nächsten Ebene der aktuellen Route.

|. Mehr API-Nutzung wird auf Github aktualisiert

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website!

Empfohlene Lektüre:

jquery ermittelt, ob Elementinhalt vorhanden ist

Detaillierte Erläuterung der Nodejs+Electron-Ubuntu-Installationsschritte

Das obige ist der detaillierte Inhalt vonZusammenfassung der Angular+Routerlink-Sprungmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!