命名路由器出口不会在延迟加载的路由中呈现模板

问题描述 投票:1回答:1

我的angular 8应用出现问题,没有渲染到命名的路由器插座中。

路线是:

routes.module:

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>

[当我单击链接时,地址栏中的网址会更改(例如,更改为http://localhost:4200/settings/(settings_o:profile)),但是没有内容呈现为settings_o,也不会加载组件。控制台中没有错误。

[link.link]仅是profile,例如在settings.module的路由中。

我需要更改什么?

javascript angular lazy-loading angular-routerlink
1个回答
0
投票

这是一个已知的错误,已经进行了很多讨论: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" }
    ]
  }
]);

当然,您必须相应地将导航更改为SettingsComponentrouterLink='/settings/default'

我做了一个Stackblitz,它不是代码的精确副本,但显示了如何解决它:https://stackblitz.com/edit/angular-nctjpv

顺便说一句,在您的原始解决方案中,如果您将命名路由器出口放置在根组件中,我认为它将显示子组件,但是放置在错误的位置。

© www.soinside.com 2019 - 2024. All rights reserved.