javascript - 条件路由在 Angular 应用程序中不起作用

Question

在我的 Angular 项目的开发构建中，在子模块的路由文件中，我正在做如下的事情，

const routes = window.innerWidth > 768 ? desktopRoutes: mobileRoutes;

然后我将这些路由传递给 RouterModule.forChild(routes)

开发构建工作得很好，但是，当我创建生产构建并部署它时，它无法工作并且只加载 mobileRoutes，无论屏幕分辨率如何。

欢迎提出我应该研究的任何建议或替代方案

注意:桌面路由组件扩展了移动组件，如果有帮助，只需添加信息!

Answer 1

因为在prod build中，使用了AOT(Ahead of time compilation)，预编译你的路由。因此，您的路线返回错误值:mobileRoutes。

有一些解决方法

1. 使用路由器:resetConfig(config)您应该将新配置作为参数传递，如 resetConfig 中所述文档，仅更改所需的路由。

2. 将守卫与 CanActivate 结合使用

---

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  if( window.innerWidth > 768 ){
    return true; // return desktopRoute
  }

  this.router.navigate(['main/']);  // mobileRoute
  return false;
}