时间戳

首页 > 解决方案 > 组件未加载到路由器插座中

angular - 组件未加载到路由器插座中

问题描述

什么时候

<router-outlet (activate)="onActivate($event)"></router-outlet>

和

<router-outlet name="buildingDetails"></router-outlet>

在同一个模板app.component.html中，单击 Building Details 按钮会将BuildingDetailsComponent加载到buildingDetails router-outlet中。

但是，当在app.component.html中注释掉buildingDetails router-outlet并在sidenavigation.component.html中注释buildingDetails router-outlet时，BuildingDetailsComponent 将不再加载到BuildingDetails router-outlet中的 BuildingDetails 按钮单击中。

app.component.html：

<router-outlet (activate)="onActivate($event)"></router-outlet>
<router-outlet name="buildingDetails"></router-outlet>

sidenavigation.component.html：

<p>
  sidenavigation works!
</p>
<button (click)="openBuildingDetails()">
  Building Details
</button>
<hr>
<!--<router-outlet name="buildingDetails"></router-outlet>--> when moving the router outlet here, loading BuildingDetails Component on openBuildingDetails() button click is not working anymore

sidenavigation.component.ts：

public openBuildingDetails() { this.router.navigate([{ outlets: { buildingDetails: "feature-component" } }]); }

应用路由模块：

const appRoutes: Routes = [
{
    path: "",
    component: SidenavigationComponent,
    pathMatch: "full"
},
{
    path: "feature-component",
    loadChildren: "./modules/building/building.module#BuildingModule",
    outlet: "buildingDetails"
}];

@NgModule({
imports: [
    CommonModule,
    RouterModule.forRoot(
        appRoutes,
        {
            enableTracing: true
        }
    )
],
exports: [
    RouterModule
]})

构建路由模块：

const routes: Routes = [
{
    path: "",
    component: BuildingDetailsComponent
}];

@NgModule({
imports: [
    RouterModule.forChild(routes)
],
exports: [
    RouterModule
]})

有谁知道为什么以及如何解决这个问题？

我为每种情况添加了一个代码示例。两个示例之间的唯一区别是命名路由器插座的位置。第一个正在工作（名为 router-outlet 在 app.component.html 中）。第二个不工作（名为 router-outlet 在 sidenavigation.html 中）。

期望的行为：当命名的路由器出口与第一个未命名的路由器出口位于不同的位置时，还应加载 BuildingDetails 组件。

问题：当将命名的路由器插座移动到与未命名的路由器插座不同的模板时，BuildingDetails 组件不再在 openBuildingDetails() 按钮单击时加载。

工作：https ://stackblitz.com/github/stonedraider/router-outlets

不工作：https ://stackblitz.com/github/stonedraider/not-working-router-outlets

标签： angularangular-routerrouter-outlet

解决方案

您必须在 app.component.html 中添加侧导航选择器，如下所示并删除父路由器出口，因为加载组件时父路由器出口冲突。

<app-sidenavigation></app-sidenavigation>

现在侧导航组件加载构建组件。

请参阅下面的答案链接以加载具有延迟加载的子项：

关联

推荐阅读