如何在单个组件中使用多个路由器插座

Question

我正在尝试在单个组件中使用多个路由器插座。下面是一个代码示例。

<div>
                <button matRipple matRippleColor="#FFFFFF20" class="btn btn-lg buttonLarge mx-4" [routerLink]="[{ outlets: {myoutlet: ['componentOne']}} ]"  matTooltipPosition="below">
                    Navigate One
                </button>
                <button matRipple matRippleColor="#FFFFFF20" class="btn btn-lg buttonLarge" [routerLink]="[{ outlets: {myoutlet: ['componentTwo']}} ]" matTooltipPosition="below">
                    Navigate Two
                </button>
            </div>
<router-outlet #outlet="outlet" name="myoutlet"></router-outlet>

但我无法在插座中呈现组件。任何建议都会有帮助。

Answer 1

确保在路由模块文件中定义了与每个组件相关的插座名称，如下所示

{path:'your_path_name',component:'componentOne',outlet:myoutlet},
{path:'your_path_name',component:'componentTwo',outlet:myoutlet}

Answer 2

您应该将路由器插座命名为：

<router-outlet name="outlet-one">
<router-outlet name="outlet-two">

然后在您的路由器配置中：

{path: '/routerOne', component: firstComponent, outlet: 'outlet-one'}
{path: '/routerTwo', component: secondComponent, outlet: 'outlet-two'}