Angular5 ルーティングを使用して値を渡す方法

今回は、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

コードをコピー

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

{{data.name}}

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

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

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

推奨読書:

JSを操作して簡単な折りたたみと展開アニメーションを実装する方法

JSを操作して透明度のグラデーションアニメーションを実装する方法

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