angular - Angular アプリのコンポーネントに戻るときに ActivatedRoute を使用してデータをロードする

Question

ユーザーがコンポーネントに戻ったときに、最後に離れたときの URL の状態でコンポーネントがロードされるように、onInit ライフサイクルフック内でこれをロードできるように、Angular アプリで activateRoute を取得しようとしています。 .

私はすでに activateRoute をインポートしており、コンストラクターに注入しています:

constructor(private route: ActivatedRoute) {}

次に、onOnit で、私が持っているものを確認するために、これを試しました。

console.log('ルート情報:', this.route.queryParams);

返されるのは ですbehavior subjectので、これを追加してみます：

console.log('route info: ', this.route.queryParams.toArray().subscribe());

これで が返されますsubscriber。

要するに、現在の URL/クエリ文字列をキャプチャして、ngOnInit 内にロードできるようにすることです。このようなもの：

ngOnInit() {
  this.loadData();
}

loadData() {
  this.route.queryParams;
}

これは近くに見えますか？コンポーネントを実際に activateRoute を使用して url/query 文字列にあるものをロードするにはどうすればよいですか?

更新：以下の提案の後、私はそれがこのように見えると思いますか?

ngOnInit() {
    this.loadData();
}

loadData() {
    let currentRoute = this.route.params.subscribe(params => {
        // logic goes here
        console.log(params['firstName']);
        return params;
      });
    this.router.navigate([currentRoute]);
}

更新 2:

私がこれを行う場合：

ngOnInit() {
    this.activatedRoute.params.subscribe((params: Params) => {
        let myParams = params;
        console.log(myParams);
      });
}

これをコンソールに戻します。

{pn_firstName.e: "1", pn_firstName.v: "John"}

そして、これは私のURL/クエリ文字列がどのように見えるかです:

http://localhost:4200/consulting;pn_firstName.e=1;pn_firstName.v=John

そのため、コンソールに表示されているものからクエリ文字列を取得しているようです。

要するに、これは、コンポーネントが読み込まれるときに、URL/クエリ文字列の現在の状態を読み込みますか?

ngOnInit() {
    let currentRoute = this.activatedRoute.params.subscribe((params: Params) => {
        let myParams = params;
        console.log(myParams);
        return myParams;
    });
    this.router.navigate([currentRoute]);
}

どうやら、そうではありません。これは、コンポーネントをロードするときに URL に対して取得するものだからです。

http://localhost:4200/consulting;closed=false;_parent=null;_parents=null;_subscriptions=%5Bobject%20Object%5D;syncErrorValue=null;syncErrorThrown=false;syncErrorThrowable=false;isStopped=false;destination=%5Bobject%20Object%5D