为 Angular Router 动态创建路由数组

Question

我想动态地为 Angular 路由器创建routes数组，以有条件地包含延迟加载的路由。

app-routing.ts

// fix declaration working perfectly fine - nothing special here
const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      { path: 'some-url', loadChildren: './path/to/my.module#MyLazyLoadedModlue'},
      ...
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

---

为了实现懒加载路由的有条件使用，我尝试过：

const useModule = true;  // simulating condition here

children: [
  useModule ? { path: 'some-url', loadChildren: './path/to/my.module#MyLazyLoadedModlue' } : [],
  ...
]

由于这种技术对于有条件地包含模块非常有效，我认为它会起作用，但它导致了我无法绕过的 TS 错误。

输入'{路径：字符串； loadChildren: () => typeof MyLazyLoadedModlue; } | undefined[]' 不是数组类型。 使用编译器选项“--downlevelIteration”来允许迭代器迭代。

---

接下来我尝试用一​​个函数生成路由......

function getRoutes() {
  // some logic to dynamically generate the routes array

  return routes;
}

imports: [RouterModule.forRoot(getRoutes())],
...

...导致编译错误：

无法读取未定义的属性“loadChildren”中的错误

有谁知道这是如何实现的并解释为什么这会引起麻烦？ 我认为动态生成路由数组不会有问题。

Answer 1

我看到的是，您在 false 状态下声明了一个嵌套的 children 数组：

children : [ [] ]

我认为你至少需要的是这个嵌套数组的声明

[{path: ''}]

尝试一下！