Angular懒加载再次加载相同路由
创始人
2024-10-27 22:01:13
0

要解决Angular懒加载再次加载相同路由的问题,可以使用以下方法:

  1. 使用路由重定向:在路由配置中,为相同路由路径创建一个重定向路由。当相同路由被访问时,先导航到重定向路由,然后再次导航到相同路由。这样可以强制重新加载组件。
const routes: Routes = [
  { path: 'component', redirectTo: 'component/reload' },
  { path: 'component/reload', component: Component }
];
  1. 使用特殊参数:在相同路由路径中添加一个特殊的查询参数,每次导航时都将该参数设置为不同的值。这样可以触发路由参数的变化,强制重新加载组件。
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 { }

相关内容

热门资讯

最终!八闽状元郎辅助器(辅助)... 最终!八闽状元郎辅助器(辅助)果然真的是有辅助插件(有挂方法)1、完成八闽状元郎辅助器辅助器v3.3...
软件辅助挂!顺欣茶楼辅助视频(... 软件辅助挂!顺欣茶楼辅助视频(辅助)真是是有辅助神器(有挂规律)顺欣茶楼辅助视频脚本下载中分为三种模...
方法辅助挂!潘潘讲故事app辅... 方法辅助挂!潘潘讲故事app辅助(辅助)真是是有辅助挂(真实有挂)1、点击下载安装,潘潘讲故事app...
记者获悉!小程序蜀山西川血战辅... 记者获悉!小程序蜀山西川血战辅助(辅助)切实存在有辅助工具(有挂详情)小薇(辅助器软件下载)致您一封...
2026版规律!广东雀神智能插... 2026版规律!广东雀神智能插件辅助(辅助)一贯确实有辅助技巧(有挂透视)1)广东雀神智能插件辅助有...
2026版辅助挂!九九联盟后台... 2026版辅助挂!九九联盟后台可以操作吗(辅助)总是是有辅助方法(有挂透明挂)九九联盟后台可以操作吗...
方法辅助挂!黑科技辅助软件免费... 方法辅助挂!黑科技辅助软件免费(辅助)切实是真的有辅助工具(有挂秘籍)一、黑科技辅助软件免费可以开透...
此事备受玩家关注!雀神广东麻将... 此事备受玩家关注!雀神广东麻将透视视频(辅助)竟然存在有辅助攻略(讲解有挂)1、金币登录送、破产送、...
无独有偶!潮友会pp下载辅助器... 无独有偶!潮友会pp下载辅助器(辅助)好像真的是有辅助app(有挂秘籍)1、下载好潮友会pp下载辅助...
2026版方法!广东雀神祈福真... 2026版方法!广东雀神祈福真的有用吗(辅助)好像是有辅助技巧(有挂工具)1、进入到广东雀神祈福真的...