用于并排显示的命名路由器出口 - 带有子路由答案

【问题标题】：Named router outlet for side by side display - with child routes用于并排显示的命名路由器出口 - 带有子路由
【发布时间】：2021-02-18 09:44:01
【问题描述】：

我的应用模块中有一个辅助路由器插座，如下所示。

<router-outlet></router-outlet> <==== PRIMARY
<mat-sidenav-container>
<mat-sidenav mode="over">
        <router-outlet name="side"></router-outlet> <=== SECONDARY NAMED OUTLET
      </mat-sidenav>
</mat-sidenav-container>

然后我有一个带有子路由的功能模块，如下所示，

@NgModule({
    RouterModule.forChild([
          {
            path: "orders",
            component: OrdersComponent,
            children: [
              {
                path: "add",
                component: AddOrderComponent,
                outlet: "side", <=== SAYING PATH TO USE SECONDARY OUTLET DEFINED IN APP MODULE
              },
            ]
          },
        ])
})
export class OrdersModule {}

我试图在我的应用模块的辅助插座（名称“side”）内显示 AddOrderComponent，但插座未激活。

<a [routerLink]="['../orders',{outlets: { side: ['add']}}]">
  Add New Order
</a>

如果我将辅助插座移动到功能模块内的任何其他组件中，它就可以工作。

我需要在 routerLink 或路由定义中定义什么特殊功能才能从功能模块访问 AppModule 中定义的辅助路由器出口？

注意：这不是延迟加载模块。在引导自身时导入应用模块。

谢谢。

【问题讨论】：

标签： angular angular-material router angular-module router-outlet

【解决方案1】：

刚刚在https://stackoverflow.com/a/53810892/3534886 上阅读了一个答案，解释了子路线和命名路线之间的区别，这让我自己感到困惑。所以功能模块对我来说不是问题。

它说，子路由用于应该出现在另一个模板中的路由。

命名路由用于应该作为另一个模板的兄弟出现的路由，例如并排显示。

就我而言，

我在我的应用程序组件中定义了 2 个并行出口（作为兄弟）。但是想要一个功能模块的孩子在兄弟姐妹中渲染。

关系冲突！

【讨论】：