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错误，我无法解决。

键入'{path：string; loadChildren：（）=> typeof MyLazyLoadedModlue; } | undefined []'不是数组类型。使用编译器选项'--downlevelIteration'可以迭代迭代器。

接下来，我尝试使用功能来生成路线...

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

  return routes;
}

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

...导致编译错误：

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

有人知道如何做到这一点，并解释为什么这会引起麻烦吗？我认为动态生成路由数组不会有问题。

Answer 1

我看到的是您在错误状态下声明了一个嵌套的子数组：

children : [ [] ]

至少我认为您需要的是此嵌套数组的声明

[{path: ''}]

尝试！

为Angular Router动态创建路由数组

1 个答案: