Question

我希望将子路由延迟加载到命名路由器出口。

我正在构建Angular 10应用程序，并且有共享相同布局的大页面。每个页面都有一个与之关联的模块，当您访问它们的相关页面时，我希望延迟加载这些模块。我创建了以下路线

const routes = [
{
  path: 'test',
  component: BaseComponent
  children: [
    { path: 'one', component: OneComponent, outlet: 'sidebar' },
    { path: 'two',  loadChildren: () => import('./mymod/two.module').then(m => m.TwoModule), outlet: 'content'} 
   ]
}]

然后在我的模板中拥有

<div> layout stuff </div>
<router-outlet name="sidebar"></router-outlet>
<router-outlet name="content"></router-outlet>

我在两个测试子组件中只有默认文本。这会将OneComponent加载到sidebar出口中，但不会将惰性路由加载到content路由器出口中。检查content出口的html会得出：

<router-outlet name="content"> </router-outlet>
<ng-component> ... </ng-component>

是否可以将路由延迟加载到命名路由器出口中？如果是这样，我该怎么做？

延迟将子路由加载到命名路由器出口

0 个答案: