Angular 提前编译的应用程序中的计算对象/贴图/字典键

我正在开发一个Angular应用程序，我们希望将路由定义为枚举。然后，对于枚举，声明它们指向的特定路由。枚举绑定到与CMS系统中的键匹配的字符串值

例如，我们的第一个简单实现是：

主干道

在app.routing.module.ts中，这两个变量随后被导入并按如下方式使用：

...
{
  path: routes[RouteKey.Dashboard],
  component: DashboardComponent,
},
{
  path: routes[RouteKey.Summary],
  component: SummaryComponent,
}

此代码在开发中运行时运行良好，但由于提前编译，它在编译过程中失败，终端中不支持消息表达式形式，指向使用计算项[RouteKey.Dashboard]：Dashboard的第一行

很公平。然后，我们尝试了另一种使用Javascript映射对象的方法，如下所示：

...
export const routes = new Map();
routes.set(RouteKey.Dashboard, "dashboard");
routes.set(RouteKey.Summary, "summary");

将app.routing.module.ts中的引用更新为routes.get***而不是routes[***]

同样，在运行开发模式时，代码运行良好，这一次代码构建正确

但是，在主持构建和访问站点时，我在浏览器中遇到以下错误：

Invalid configuration of route '': routes must have either a path or a matcher specified

---

有人知道我如何解决这个问题吗？在使用提前编译的角度应用程序中，是否可能有一个用于保存路由的计算字典对象？

我建议直接使用枚举常量，而不是导出路由

export enum RouteConstants {
  Dashboard = 'dashboard',
  Summary = 'summary',
  ...
}

您可以在路线中使用它：

{
  path: `:${RouteConstants.Dashboard}`,
  ...
}

---

如果我误解了你的问题，请原谅我。。。但是根据你对答案的评论

---

问题是我有一组当前路由和一组不推荐使用的路由，它们具有不同的路由值，但应该使用相同的枚举

因此有两组管线，它们之间的唯一区别是管线值

i、 e.右侧仪表板、摘要等不同，但标识这些管线值的对象属性名称左侧保持不变

因此，我认为您根本不需要使用ENUM或。我认为您可以简单地使用一个接口来定义当前路由。然后，对不推荐使用的路由重复使用相同的接口

例子： 主干道

导出常量myAppRoutes:IRoutes={ 仪表板：仪表板， 总结：总结， 家：家， 登录：登录， 设置：设置 } 导出常量MyDeprecateDurotes:IRoutes={ 仪表板：旧仪表板， 总结：旧的总结， 家：老家， 登录名：oldlogin， 设置：旧设置 } 导出接口路由{ 仪表板：字符串； 摘要：字符串； 家：字符串； 登录：字符串； 设置：字符串； } app-routing-module.ts

//不必是环境。生产时，可以使用其他条件 var myRoutes:IRoutes=environment.production？myAppRoutes：MyDeprecatedrootes； 常数路由：路由=[ { 路径：myRoutes.dashboard， 组件：仪表板组件， }, { 路径：myRoutes.summary， 组件：Summary组件， }, { 路径：myRoutes.settings， 组件：设置组件 } //LoginComponent等的路径 ]; 然后，在您的组件中，您可以使用mainRoutes.ts中定义的相同路由名称，通过再次导入它们，这将允许您的应用程序在加载不同路由时仍能工作。e、 g:

app.component.html

app.component.ts

导出类AppComponent{ LoadedRoutes名称：IRoutes=environment.production？myAppRoutes:MyDeprecatedDrootes； }

---

这里有一个Stackblitz示例，我建议您直接使用枚举常量，而不是导出路由。检查我的答案我在prod和AOT中使用了它。问题是我有一组当前路由和一组不推荐的路由，它们具有不同的路由值，但应该使用相同的枚举。是的，这与我需要的非常接近，只是我需要重定向。但它足够接近我的解决方案是微不足道的

{
  path: `:${RouteConstants.Dashboard}`,
  ...
}