Angularのルーティングで子画面間の遷移時にデータが更新されなくて困ったお話し

1574 ワード
Angular8 resolver routes runGuardsAndResolvers routes テキストリンク

Angularでのお話し。
先日、登録画面で確定ボタンを押下した後に、自動的に詳細画面へ遷移する仕組みを実装しました。
実装内容としましては、そのまんま、登録API呼んで、レスポンスの詳細IDとか受け取って、詳細画面へ　router.navigate させる。
登録画面では特に問題なし！

ところが、登録画面があるならもちろん編集画面もあり、編集画面にも同じ機能を実装。

編集完了ボタンを押下後、詳細画面へは遷移するも、更新前の情報しか反映されない。。。なぜ？？

API呼んでsubscribeしてから遷移しているのに、どうしても、更新されていないまま、詳細画面へ遷移する。。。

え～～～～～、なんで～～～～(涙)

意地になってsetTimeout とか試してみたりしても結果は変わらず（涙汗）
errorとかも、まったく全然出ていない。

いろいろ調べた結果、編集画面と詳細画面の両者ともにroutesの設定で、childrenの同階層に設定されており、その場合どちらか一方からどちらかへ遷移するのに大元のパスまたはパスパラメータが、変更されないのでガードとリゾルバーが再実行されないようです。。。

対応策としましては、routeでガードとリゾルバがいつ実行されるかを定義する「runGuardsAndResolvers」というオプションがあるので、これに「'always'」を設定してやるとガードとリゾルバーはURLへの変更の度に起動されるようになるそうな。

export const ROUTES: any = [
  {
    path: 'hogehoge/:name',
    runGuardsAndResolvers: "always",
    component: HogejectComponent,
    resolve: { hoge: HogeResolver },
    children: [

おぉ～～～！ちゃんと更新されている～～～！解決！！

参考にさせていただいた記事

https://stackoverflow.com/questions/44232418/how-to-refresh-a-routes-resolved-data
https://juristr.com/blog/2019/01/Explore-Angular-Routers-runGuardsAndResolvers/