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

Posted 2023-02-19

【中文标题】条件路由在 Angular 应用程序中不起作用

【英文标题】：Conditional routing not working in Angular Application

【发布时间】：2021-08-13 09:50:23

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

是否尝试在本地重建应用程序 env prd？

是的，我试过了

我对 Angular 了解不多，但是，我相信应用程序在哪里初始化。我猜它 ngOnInit() 你可以计算那里的宽度，然后保存在一些服务或其他东西中。然后使用你注册路线的地方

【参考方案1】：

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

有一些解决方法

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

通过CanActivate 使用守卫

---

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

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

【讨论】：

我认为使用resetconfig会重置整个路由器，但是如果我只想更改/切换功能模块中的路由应该怎么做。

否，因为您应该将新配置作为参数传递，只更改所需的路由。检查这个angular.io/api/router/Router#resetConfig