web-dev-qa-db-ja.com

Angular4のActivatedRouteとActivatedRouteSnapshotの違いは何ですか

Angular 4のActivatedRouteSnapshotとActivatedRouteの違いは何ですか？ ActivatedRouteSnapshotはActivatedRouteの子であり、ActivatedRouteにはActivatedRouteSnapshotが含まれることを理解しています。

ちなみに、この質問への回答を求めてGoogle検索を実行しようとしましたが、検索結果が理解できるものは見つかりませんでした。

ありがとうございました！

angularangular-routingangular2-router
48
RajnishCoder

ActivatedRoute再利用可能 なので、ActivatedRouteSnapshotは、ActivatedRouteの特定のバージョンを表す不変オブジェクトです。 ActivatedRouteと同じプロパティをすべてプレーン値として公開し、ActivatedRouteはオブザーバブルとして公開します。

実装のコメントは次のとおりです。

export class ActivatedRoute {
  /** The current snapshot of this route */
  snapshot: ActivatedRouteSnapshot;

ルーターがコンポーネントを再利用し、新しいアクティブ化されたルートを作成しない場合、同じActivatedRouteSnapshotに対して2つのバージョンのActivatedRouteがあります。次のルーティング構成があるとします。

path: /segment1/:id,
component: AComponent

次に移動します：

/segment1/1

activatedRoute.snapshot.params.idに1としてパラメーターがあります。

次に移動します：

/segment1/2

activatedRoute.snapshot.params.idに2としてパラメーターがあります。

以下を実装することで確認できます。

export class AComponent {
  constructor(r: ActivatedRoute) {    
    r.url.subscribe((u) => {
      console.log(r.snapshot.params.id);
    });
60
Max Koretskyi aka Wizard

ルートからパラメーターを取得するには2つの方法があります。

1.スナップショット（route.snapshot.paramMap.get）。初期化中に読んでください。

コンポーネントの初期化中にパラメーターの初期値を1回だけ必要とし、ユーザーが同じコンポーネントを使用している間にURLが変更されることを期待しない場合は、スナップショットを使用します。

  • つまりproduct/2ルートで、product/3に到達する唯一の方法は、製品検索画面に戻り、製品の詳細をクリックすることです（詳細コンポーネントを残してから、新しいルートでそれを再度開くparam）

2.観測可能（route.paramMap.subscribe）。初期化中にサブスクライブします。

ユーザーがまだ同じコンポーネント上にいる間にルートが変更される可能性がある場合、Observableを使用します。したがって、コンポーネントの初期化は再度呼び出されませんが、URLが変更されると、observableはサブスクライブされたロジックを呼び出します。

  • つまりproduct/2ルートにあり、次のIDレコードproduct/3に移動するための「次へ」ボタンがある場合、ユーザーはコンポーネントを離れずに再オープンしませんでしたが、URLは新しいパラメーターを受け取りました。


一般的に言えば、よくわからない場合は登録が最も安全なルートです

16
Don Cheadle