要解决Angular懒加载再次加载相同路由的问题,可以使用以下方法:
const routes: Routes = [
{ path: 'component', redirectTo: 'component/reload' },
{ path: 'component/reload', component: Component }
];
const routes: Routes = [
{ path: 'component', component: Component }
];
在组件中,可以使用ActivatedRoute
服务来订阅参数变化,并在参数变化时执行相应的操作。
import { ActivatedRoute, Router } from '@angular/router';
constructor(private route: ActivatedRoute, private router: Router) {
this.route.queryParams.subscribe(params => {
if (params.reload) {
// 执行重新加载组件的操作
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.navigateByUrl('/component');
}
});
}
这样,每当导航到相同路由并带有reload=true
的查询参数时,组件将被重新加载。
请注意,以上方法仅适用于懒加载的路由模块。如果要在非懒加载的模块中重新加载相同路由,可以使用相同的方法,但需要在RouterModule.forRoot
方法中设置onSameUrlNavigation
为'reload'。
@NgModule({
imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
exports: [RouterModule]
})
export class AppRoutingModule { }