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

Question

当

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

和

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

在同一模板 app.component.html 中，单击“建筑详细信息”按钮会将 BuildingDetailsComponent 加载到 buildingDetails router-outlet.

但是当在app.component.html中注释掉buildingDetails router-outlet并在buildingDetails router-中注释时- sidenavigation.component.html 中的 outlet，BuildingDetailsComponent 将不会加载到 buildingDetails router-outlet 上的 Building Details Button Click 上。

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

Answer 1

您必须如下所示在 app.component.html 中添加侧边导航选择器并删除 parent router-outlet 因为 parent router-outlet 在加载组件时发生冲突。

<app-sidenavigation></app-sidenavigation>

现在侧面导航组件加载建筑组件。

要么参考下面的答案 link 以使用延迟加载加载 children：

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

Component not loaded into router-outlet

router-outlet

angular

angular-router