Angularでのリンク切り替えの問題

ルーティングにおけるリンク切り替えの問題の解決策を解説しましょう。 この問題は、Angularに既に含まれているRxJSライブラリを使用して解決できます。

まずは、Subscriptionクラスをインポートします：

app/aaaa/aaaa.component.tsimport { Subscription } from 'rxjs';

プライベートプロパティを作成します：

app/aaaa/aaaa.component.tsexport class AaaaComponent { 
  private subscription: Subscription;
}

idという名前のパラメータを保持するためのプロパティを作成します：

app/aaaa/aaaa.component.tsexport class AaaaComponent { 
  id: number | undefined;
  private subscription: Subscription;
}

次に、ルートからのidパラメータの変更をサブスクライブします：

app/aaaa/aaaa.component.tsexport class AaaaComponent { 
  id: number | undefined;
  private subscription: Subscription;
  
  constructor(private activateRoute: ActivatedRoute) {
    this.subscription = activateRoute.params.subscribe(params => this.id = params['id']);
  }
}