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

编程问答 2022-06-04

问题描述

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

<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中定义的辅助路由器出口？

注意：这不是延迟加载的模块。自我引导时导入到应用模块中。

谢谢。

解决方法

现在，只需阅读https://stackoverflow.com/a/53810892/3534886上的答案，便会解释我对子路线和命名路线之间的区别。所以功能模块对我而言不是问题。

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

命名路由用于应显示为另一个模板的同级路由，例如并排显示。

就我而言，

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

关系冲突！

angularangularangular-materialangular-modulerouterrouterrouterrouter-outlet