同じURLにルーティングする際にngOnInitを呼び出すようにする
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の設定だけでうまくいくかもしれないが、自分は上記で動作できた。
Author And Source
この問題について(同じURLにルーティングする際にngOnInitを呼び出すようにする), 我々は、より多くの情報をここで見つけました https://qiita.com/bass/items/d692a3f15964e7b5c0ba著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .