我的 Angular 8 应用程序出现问题,无法渲染到指定的路由器导出中。
路线是:
路线.模块:
const routes: Routes = [
...
{
path: 'settings', loadChildren: './settings/settings.module#SettingsModule', canActivate
},
]
设置.模块
RouterModule.forChild([
{
path: '', component: SettingsComponent
},
{
path: 'profile', component: ProfileComponent, outlet: 'settings_o'
},
{
path: 'users', component: UsersComponent, outlet: 'settings_o'
}
])
settings.component.html
<nav mat-tab-nav-bar color="primary" class="bg-whitesmoke primary">
<span mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="[{outlets: {settings_o: [link.link]}}]"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{link.label}}
</span>
</nav>
<router-outlet name="settings_o"></router-outlet>
当我单击链接时,地址栏中的 URL 会发生变化(例如变为 http://localhost:4200/settings/(settings_o:profile)
),但没有内容呈现给 settings_o
,也不会加载组件。控制台中没有错误。
link.link
就是简单的 profile
,就像在 settings.module 的路由中一样。
我需要改变什么?
最佳答案
这是一个已被广泛讨论的已知错误:https://github.com/angular/angular/issues/10981
据我所知,这个问题还没有完全解决,但有解决方法:https://github.com/angular/angular/issues/10981#issuecomment-454425220
您应该为延迟加载模块提供默认路由,并为您想要在指定导出中打开的组件定义子路由,例如:
RouterModule.forChild([
{
path: "default",
component: SettingsComponent,
children: [
{ path: "profile", component: ProfileComponent,outlet: "settings_o" },
{ path: "users", component: UsersComponent, outlet: "settings_o" }
]
}
]);
当然,您必须相应地将导航更改为SettingsComponent
:routerLink='/settings/default'
我制作了一个 Stackblitz,它不是您代码的精确副本,但它显示了如何解决它:https://stackblitz.com/edit/angular-nctjpv
顺便说一句,在你原来的解决方案中,如果你将命名的路由器导出放在根组件中,我认为它会显示子组件,但在错误的位置。
关于javascript - 命名路由器导出不会在延迟加载的路由中渲染模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59637160/