【Angular】コンポーネントをリロードしたい

Angularでコンポーネントのリロードをしたい

そう思ったことのある人は多いはず。

この記事では備忘録としてコンポーネントリロードをするための3つの手段をまとめます。

ngOninitの呼び出す方法

何かのボタンを押した際に画面の初期表示メソッドを呼ぶシンプルなやり方。

test.ts

this.ngOninit();

routerを使う方法

test.ts

constructor(private router: Router){
     // route reuse strategyのオーバーライド
     this.router.routeReuseStrategy.shouldReuseRoute = function(){
        return false;
     }

     this.router.events.subscribe((evt) => {
        if (evt instanceof NavigationEnd) {
           this.router.navigated = false;
           // ウィンドウトップへのスクロール
           window.scrollTo(0, 0);
        }
    });
}

ただし、routerを使っている他のところに影響がないかをチェックした方がいいです。

app.routing.tsを編集する方法

まずapp.routing.tsを編集

app.routing.ts

@ngModule({
 // reloadに設定する
 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
 exports: [RouterModule],
 })

// 中略

export const routes: Routes = [
 {
   path: 'invites',
   component: InviteComponent,
   children: [
     {
       path: '',
       loadChildren: './pages/invites/invites.module#InvitesModule',
     },
   ],
   canActivate: [AuthenticationGuard],

  // この行を追加 
  runGuardsAndResolvers: 'always',
 }
]

次にリロードしたいコンポーネントを編集

test.ts

 //追加
 navigationSubscription;     

 constructor(
   private router: Router
 ) {
   this.navigationSubscription = this.router.events.subscribe((e: any) => {
     // NavigationEnd eventが起こった時に初期化メソッドを呼んで、リロードっぽく見せる。
     if (e instanceof NavigationEnd) {
       this.initialiseInvites();
     }
   });
 }

 // 好きな初期化メソッド
 initialiseInvites() {
   
 }

参考文献

• Simon McClive, "Simon McClive", https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

• "Force reload/refresh current route with RouteReuseStrategy", https://github.com/angular/angular/issues/13831