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

Question

在我的 Angular 项目中的开发构建中，在子模块的路由文件中，我正在执行如下操作，

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

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

dev 构建就像一个魅力，但是，当我创建一个 prod 构建并部署它时，这个东西无法工作，并且只加载 mobileRoutes，而与屏幕分辨率无关。

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

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

Answer 1

这是因为在 prod build 中，使用了 AOT（提前编译）来预编译您的路线。因此，您的路线返回 false 值：mobileRoutes。

有一些解决方法

1. 使用router：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;
}