How to use multiple router outlet in single component-CodePudding

I am trying to use multiple router outlets in a single component. Below is a code sample.

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

But I am not able to render the component in the outlet. Any suggestion will be helpfull

CodePudding user response：

you should name your router outlet like:

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

then in your router config:

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

CodePudding user response：

Make sure you have defined the outlet name in the routing module file with respect to each component, something like this

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