CODEWITHSUNDEEP
angularangular-routing
Caio Henrique
Caio Henrique

Reputation: 98

How to use a named router-outlet inside a primary router-outlet?

I have a primary router-outlet (inside my side-nav component) and I created other two router-outlet inside this one.

I got something like this.

   router-outlet (primary) {

       router-outlet name='info' { }

       router-outlet name='services' {

          the path I want to navigate only inside this outlet

       }
    }

I believe there is something wrong here: 

<button [routerLink]="[{ outlets: { primary: { services: ['view'] }}}]"> Go to services view</button>

I coded a simple version on stackblitz

https://stackblitz.com/edit/router-outlet-doubt

I expect navigate to view-service component, may somebody help me?

Upvotes: 2

Views: 686

Answers (1)

Md Rafee
Md Rafee

Reputation: 5530

Secondary child outlet inside empty primary segment does not match

it is a known problem and not fixed yet. There is an open issue you can check at github.

There is a workaround you check on stackblitz

And I rewrote your code and now it works. check here stackblitz

what I have changed so far.

  1. I changed the empty parent to a router called app which refer to the BudgetsComponent as it is workaround for the problem.

  2. Change the view routerLink as follows

    <button [routerLink]="[{outlets: {services: ['view']}}]"> Go to services view</button>

    where services is the outlet name and view is the routing path.

Upvotes: 1

Related Questions