0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-06-15

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/

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?