javascript - 命名路由器出口不会在延迟加载的路由中呈现模板
问题描述
我的 Angular 8 应用程序有问题,没有渲染到命名的路由器插座。
路线是:
路线模块:
const routes: Routes = [
...
{
path: 'settings', loadChildren: './settings/settings.module#SettingsModule', canActivate
},
]
settings.module
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
顺便说一句,在您最初的解决方案中,如果您将命名的路由器插座放在根组件中,我认为它会显示子组件但在错误的位置。
推荐阅读
- java - Java合并文件
- html - 两个简单的 HTML & CSS 问题
- networking - Zookeeper 僵尸客户端
- c++ - C++ 中的时间复杂度
- go - 在 ubuntu 上安装协议缓冲区有困难
- jquery - 如何在 span 标签中写入值?
- python - 如何将函数映射到表示为 numpy 数组的图像中的每个像素?
- java - 我需要找到具有与 slowChop 类似功能的快速斩波
- windows - Windows 目标构建:错误:C 编译器在配置时无法创建可执行文件
- python-3.x - 如何使用 LibreOffice 宏将 os.system() 命令写入 python 脚本并执行它?