Angular5 ルーティング値の転送方法の概要-jsチュートリアル-php.cn

Angular5 ルーティング値の転送方法の概要

php中世界最好的语言

リリース： 2018-05-15 09:11:15

オリジナル

1864 人が閲覧しました

今回は、Angular5ルーティングの値渡し方法の概要と、Angular5ルーティングの注意事項

について、実際のケースを紹介します。

現在、Angular は安定版 Angular5 にアップグレードされています。このアップグレードは、より小さく、より高速で、より安定しています。angularjs でのルーティングの最大の欠点は、Angular のコア部分であると言えます。 Angular でのルーティングは、ページジャンプだけでなく、ヒーローの詳細へのジャンプもできません。多くのリストでは、各ヒーローの詳細ページを作成することは不可能です。ルーティングパラメーターが登場します! ルーティングの受信パラメーターを通じて、そのヒーローの詳細を特定します!

次に、公式 Web サイトに移動して、単一値の ID を渡す方法を説明します。もう 1 つは複数のデータを渡すことです

1. 単一の値を渡す

上記は公式 Web サイトの例です

最初はリストです。ページとジャンプ方法

コードをコピーします

コードは次のとおりです:

次にルーティングを設定します: (単一の値を渡す方法は詳細コンポーネントのルーティングで設定する必要があります)

['/hero', hero.id]

ログイン後にコピー

渡した後、パラメータが取得されます。そしてパラメータは詳細コンポーネント

 <ul class="items">
  <li *ngFor="let hero of heroes$ | async"
   [class.selected]="hero.id === selectedId">
   <a [routerLink]="[&#39;/hero&#39;, hero.id]">
    <span class="badge">{{ hero.id }}</span>{{ hero.name }}
   </a>
  </li>
 </ul>

ログイン後にコピー

のngOnInit

ライフサイクルで取得されます。通常の複雑なビジネスシナリオでは、複数のデータを転送する必要がありますが、この時点で何をすべきでしょうか? queryParams

コードをコピー

コードは次のとおりです:

ここにあるデータは私のもので、直接取得されたものです。データを整理してパラメータを設定して HTML を簡素化することもできますここで、複数値の受信ルーティングパラメータを設定する方法について質問があります。このパラメータは、実際には、必要ありません。ルーティング設定を行ってデータを取得するだけです!

{
  path:'listDetail/:id',
  component:ListDetailComponent
 },

ログイン後にコピー

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

推奨読書:

vscode で .vue を使用する手順の詳細な説明

jQuery の XML ノードと属性の実装手順の詳細な説明

以上がAngular5 ルーティング値の転送方法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。