Angular5でルートパラメータ変更時に表示も変更したい

Question

前提・実現したいこと

データをグラフとして表示するためのWebアプリケーションを作成中で、
フロント側でAngular5のrouterを使ってルーティングを行なっており、
パスからパラメータを取ってきており、
パラメータに従ってサーバ側にリクエストしてデータを取得し、表示しています。
ルーティングのパス指定としては以下のようになっており、

{ path: 'top/:year/:key', component: TopComponent}

例えば、top/2017/quarter:1 というパスで2017年度第1四半期のデータを表示するといった具合です。

画面の表示としては、サイドバーのコンポーネント(SideNavComponent)と
メインの表示のコンポーネント(TopComponent)の2つのコンポーネントから1画面が構成されています。
メイン画面はngOnInit()の中でサーバへのリクエストを飛ばしています。
サイドバーで表示したいグラフのパラメータを設定し、
サイドバーの表示ボタンを押すとメイン画面にグラフが表示されるようにしたいです。

発生している問題・エラーメッセージ

サイドバーの表示ボタンを押した時の処理として

this.router.navigate(['top/' + this.year + '/' + this.key]);

という具合にAngularのrouterを使ってルーティングしているのですが、
表示ボタンを押してもurlが変わるだけで表示は変わりません。

試したこと

3つほど試しました。
0. ルーティング後にリロード
表示ボタンを押した時の処理の最後にlocation.reload();を加えることで、リロードして表示を変更することができました。しかし、これだと見た目が悪い上にビルドしてサーバに上げた時にurl直打ちと同じ状態になってしまうため表示してくれませんでした。
0. ngOnInit()の呼び出し
表示ボタンを押した時にTopComponentのngOnInit()を呼び出したのですが、パスのパラメータを取ってきてくれず、undefined状態になっていました。
0. ngDoCheck()でのリクエスト
TopComponentのngOnInit()でリクエストを飛ばすのではなく、ngDoCheck()でリクエストを飛ばすようにしましたが、常にリクエストを送っている状態になってしまいました。

質問がわかりづらかったらすみません。要約すると、同じコンポーネントへのルーティングでも表示を変更するようにできるかどうかが知りたいです。よろしくお願いします。

Answer 1

RouterModuleのデフォルトの挙動では、Routerがコンポーネントを初期化するのはURLに対応するコンポーネントの種類が変わった時だけです。つまり、今回の場合はパラメータが変わっても TopComponent であることにかわりがないので、Routerはコンポーネントを再利用し、 ngOnInit は呼び出されません。

このような場合は、ActivatedRoute のObservable APIを使って、パスパラメータの変更をサブスクライブします。

constructor(
  private route: ActivatedRoute,
) {}

ngOnInit() {
  // パスパラメータの変更をサブスクライブする
  this.route.paramsMap.subscribe(paramsMap => {
    const year = paramsMap.get('year');
    const key = paramsMap.get('key');
    // パラメータが変わった後の初期化処理
  })
}

参考: https://angular.jp/guide/router#activated-route-in-action

Answer 2

要約すると、同じコンポーネントへのルーティングでも表示を変更するようにできるかどうかが知りたい

できますよ。
質問を見るにAngular Routeが定義出来てないっぽいですね。

以下のように、パス（path）とナビゲート時にRouterが作成するコンポーネント（component）は最低限定義する必要があります。
https://angular.io/api/router/Routes#simple-configuration

この辺の理解が難しいのであればもチュートリアル参考にしてみてください。

追記

もう少し丁寧に書くと、表示更新するのはルータの仕事ではないので、パスを変更しない場合ルータは何もしません。
なので、同じコンポーネントへのルートをちゃんと定義しているか再確認してみてください。

ヒント：
{ path: 'search/:year/:key', component: TopComponent}