Angular 组件未加载到路由器出口

什么时候

建筑布线模块：

<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

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
]})

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

我为每个案例添加了一个代码示例。两个示例之间的唯一区别是命名路由器出口的位置。第一个正在工作（名为router outlet的文件位于app.component.html中）。第二个不工作（名为router outlet的文件位于sidenavigation.html中）

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

问题：将命名路由器出口移动到与未命名路由器出口不同的模板时，openBuildingDetails（）按钮上的BuildingDetails组件不再加载

工作：

---

不工作：

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

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

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

---

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

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

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

我希望导航也能与sidenavigation.component.html中的路由器插座配合使用，即，不仅是在app.component.htmlen中，您还可以在其中添加另一个路由器出口，并在该模块的子级中定义路由，否则请提供更多详细信息或添加适当的演示。您能否解释为什么加载组件时父路由器出口发生冲突？在我正在进行的项目中，似乎有必要通过路由器插座加载应用程序sidenavigation，因此，我不认为我可以通过插入带有html标记的app sidenavigation来替换路由器出口。实际上，您的父路由位于app.module Reference中，然后您可以看到延迟加载是不同的路径，而不是作为子路径的部分，例如路径：“”，子路径：[]，但它是作为基本路由，因此在任何情况下它都将引用父路由器出口。好的，因此，方法是将延迟加载路径移动到sidenavigation路径的子项：[]？当我点击BuildingDetails按钮时，它会抛出错误“无法匹配任何路由。URL段：'feature component'”。我希望导航也能与sidenavigation.component.html中的路由器出口一起工作，它是，不仅是在app.component.htmlen中，您还可以在其中添加另一个路由器出口，并在该模块的子级中定义路由，否则请提供更多详细信息或添加适当的演示。您能否解释为什么加载组件时父路由器出口发生冲突？在我正在进行的项目中，似乎有必要通过路由器插座加载应用程序sidenavigation，因此，我不认为我可以通过插入带有html标记的app sidenavigation来替换路由器出口。实际上，您的父路由位于app.module Reference中，然后您可以看到延迟加载是不同的路径，而不是作为子路径的部分，例如路径：“”，子路径：[]，但它是作为基本路由，因此在任何情况下它都将引用父路由器出口。好的，因此，方法是将延迟加载路径移动到sidenavigation路径的子项：[]？当我点击BuildingDetails按钮时，它抛出错误“无法匹配任何路由。URL段：'功能组件'”。
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
]})

<app-sidenavigation></app-sidenavigation>