问题可能出现在路由配置中,路由配置设计时需要指定特定的节点才能正确的显示具有多个出口的懒加载模块。下面是一些代码示例:
app-routing.module.ts:
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent, pathMatch: 'full' },
{
path: 'lazy-loaded-module',
loadChildren: () =>
import('./lazy-loaded-module/lazy-loaded-module.module').then(
(m) => m.LazyLoadedModule
),
},
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
exports: [RouterModule]
})
export class AppRoutingModule { }
lazy-loaded-module-routing.module.ts:
const routes: Routes = [
{
path: '',
component: LazyLoadedModuleComponent,
children: [
{
path: 'outlet-one',
outlet: 'outlet-one',
component: OutletOneComponent
},
{
path: 'outlet-two',
outlet: 'outlet-two',
component: OutletTwoComponent
},
]
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class LazyLoadedModuleRoutingModule { }
lazy-loaded-module.component.html:
请确保路由配置和模板中的节点都正确。在这个例子中,节点“lazy-loaded-module”的子节点才会使用两个具有名称的出口“outlet-one”和“outlet-two”。
上一篇:Angular13:具有多个插座的惰性加载模块未显示
下一篇:Angular13:命名空间'/node_modules/firebase/compat/index'没有导出成员'User'ts(2694)