組件未加載到路由器插座中

Question

什么時候

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

和

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

. 在app.component.html的同一模板中，單擊Building Details按鈕會將BuildingDetailsComponent加載到 。

in app.component.html and comment in in sidenavigation.component.html , BuildingDetailsComponent will not be loaded into on Building Details Button Click anymore. 但是當在app.component.html中注釋掉buildDetails 在sidenavigation.component.html中的中注釋時 ，BuildingDetailsComponent將不會被加載到細節按鈕上的再點擊。

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組件。

問題：將指定的路由器插座移動到與未命名的路由器插座不同的模板時，不再在openBuildingDetails（）按鈕單擊上加載BuildingDetails組件。

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

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

Answer 1

您必須在app.component.html中添加側導航選擇器，如下所示，並刪除父路由器插座，因為加載組件時父路由器插座沖突。

<app-sidenavigation></app-sidenavigation>

現在側面導航組件加載構建組件。

請參閱以下答案鏈接以加載延遲加載的子項：

鏈接