Angular+RouterLink はさまざまな派手なジャンプを行います

php中世界最好的语言
リリース: 2018-06-01 11:36:55
オリジナル
1351 人が閲覧しました

今回は、さまざまな派手なジャンプを行うための 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 にクリックを追加しますオブジェクト

EventMonitoring がトリガーされると、ルーティングのために 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>
ログイン後にコピー
この記事の事例を読んだ後は、この方法を習得したと思います。 PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

JSで雪の結晶が降るアニメーションを実装する手順の詳細な説明

Node.Jsでポート再利用機能を実装する方法

以上がAngular+RouterLink はさまざまな派手なジャンプを行いますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!