Angularで同じURLにルーティングするとngOnInitメソッドは呼び出されない
app-routing.module.ts
const routes: Routes = [
{ path: 'sample', component: SampleComponent }
};
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
sample.component.ts
@Component({
selector: 'app-sample',
templateUrl: './sample.component.html',
styleUrls: ['./sample.component.css']
})
export class SampleComponent implements OnInit {
constructor(private router:Router) {}
//2回目以降は呼び出されない
ngOnInit(): void {
}
//自分自身へ遷移する
click(event:any) :void {
//同じURLへ遷移
this.router.navigate(['/sample']);
}
}
これだと同じURLへ遷移して同一画面上の値を更新しようとしても更新されない。
この場合はapp-routing.module.tsとsample.component.tsを以下のように変更する
app-routing.module.ts
const routes: Routes = [
{ path: 'sample', component: SampleComponent }
};
@NgModule({
//同じURLのときはreloadするように指定
imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
exports: [RouterModule]
})
export class AppRoutingModule { }
sample.component.ts
@Component({
selector: 'app-sample',
templateUrl: './sample.component.html',
styleUrls: ['./sample.component.css']
})
export class SampleComponent implements OnInit {
constructor(private router:Router) {
//shouldReuseRouteをfalseに設定
this.router.routeReuseStrategy.shouldReuseRoute = function () {
return false;
};
}
//2回目も呼び出される
ngOnInit(): void {
}
//自分自身へ遷移する
click(event:any) :void {
//同じURLへ遷移
this.router.navigate(['/sample']);
}
}
※もしかしたらshouldReuseRouteの設定だけでうまくいくかもしれないが、自分は上記で動作できた。