angular+routerlinkジャンプ方法のまとめ

今回は angular+routerlink ジャンプ方法の概要をお届けします。 angular+routerlink ジャンプ方法でまとめられている 注意点 について、実際の事例を見てみましょう。

はじめに

Router の Navigate() メソッドを使用して ルーティングを切り替えることに加えて、Angular2 は DOM オブジェクトをルーティング エントリに拡張するためのディレクティブも提供します:

@View({
directives:[RouterOutlet,RouterLink]
template : `<nav>
<b router-link="video">video</b> | 
<b router-link="music">music</b>
</nav>
<router-outlet></router-outlet>`
})

RouterLink ディレクティブはホスト DOM オブジェクト click イベント モニタリングを追加し、トリガーされたときにルーティングのために Router の navigate() メソッドを呼び出します。

ただし、この記事では主に Angular の RouterLink ファンシージャンプに関する内容を紹介します。皆さんの参考と学習のために共有します。以下では詳しく説明します。

routerLink 自体は 2 つの書き込み方法をサポートしています:

<a routerLink="detail">
</a>
<a [routerLink]="[&#39;detail&#39;]">
</a>

routerLink の値の書き込み方法とその違いは何ですか?

現在のルートが

`http://localhost:4200/#/doc/license`

だとすると、 書き方1:絶対パス/+ルート名

 <!--跳到 http://localhost:4200/#/doc/license -->
 <a [routerLink]="[&#39;/doc/demo&#39;]" >跳呀跳</a>
 
 <!--跳到 http://localhost:4200/#/demo -->
 <a [routerLink]="[&#39;/demo&#39;]" >跳呀跳</a>

すると、URLは

http://localhost:4200/#/doc/demoとなり、そこにジャンプします。つまり、 http:// localhost:4200/#/ + ジャンプ先の絶対パスです。

書き込み2: ルート名route name

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

その場合、URLはhttp://localhost:4200/#/doc/license/(demo)、つまりhttp://localhost:4200/#/になります。 doc/license + ジャンプ先の絶対パス この時点で、ルートに何かが追加され、ジャンプしません /(demo) に変更されます。

書き方3:相対パス../ルート名

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

するとURLは

http://localhost:4200/#/doc/demo、つまりhttp://localhost:4200/#となります。 /doc + you ジャンプ先の相対パス。前のレベルの参照が開始されます。

書き方4: ./ルート名、つまり現在のルート+ジャンプ先として書いたルート

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

するとURLは

http://localhost:4200/#/doc/license/デモ、つまり http://localhost:4200/#/doc/license + ジャンプ先の相対パスです。この一致するルートを検索し、現在のルートの次のレベルからジャンプします。

| 詳しい API の使用法は github で更新されています

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

要素コンテンツが存在するかどうかを判断するためのjquery

Nodejs+Electron ubuntuのインストール手順の詳細な説明

以上がangular+routerlinkジャンプ方法のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。