Angular+RouterLink はさまざまな派手なジャンプを行います-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-06-01 11:36:55

オリジナル

1385 人が閲覧しました

今回は、さまざまな派手なジャンプを行うための 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 サイトの他の関連記事を参照してください。