Angular Router - named router-outlets under children routes-CodePudding

I try to use multiple router outlets in my Angular app. I experience problems whenever I try to use multiple router outlets inside my shell container.

The intended behaviour is to have both the main component and the details component to be rendered when I visit their paths:

What approach should I take to tackle this problem to allow multiple router outlets in the children modules of the shell?

CodePudding user response：

In case of children routes, what you are talking about is nested router outlet where the multiple router-outlet directive is not part of one component html. In that case naming of outlet is not required. You can read more at :-

https://blog.devgenius.io/the-art-of-nested-router-outlets-in-angular-dafb38245a30

CodePudding user response：

Angular routing can have up to one primary router outlet, and zero or more auxiliary router outlets. To create an auxiliary outlet, just give it a unique name.

<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>

The primary outlet is optional, you can name them all if you want. From my testing, it looks like Angular will only render one outlet for each unique name.

To assign a path to the aux outlet, just add the outlet property to a Route

const routes: Routes = [
  {
    path: 'features',
    component: FeatureOneComponent,
  },
  {
    path: 'features',
    component: FeatureTwoComponent,
    outlet: 'aux',
  },
];

Now both components appear at the features path.

Another solution would be to just put both components in an enclosing component, and use a single router-outlet to navigate to it.

More info on navigating auxiliary paths here: https://www.techiediaries.com/angular-router-multiple-outlets/#Create_Named_Router_Outlet

If you want to put a router outlet inside of another routed component, you can use the children array: https://blog.devgenius.io/the-art-of-nested-router-outlets-in-angular-dafb38245a30. You don't need to give nested router-outlets unique names.