CODEWITHSUNDEEP
angularrouteroutlet
Jules Pauly
Jules Pauly

Reputation: 11

Angular 8, how can I use the primary outlet route when i'm in another router outlet

sorry I'm new to Angular and don't understand very well how router outlet works.

    {path: 'organisation/:orga_id/event/:event_id', component: EventAdminComponent, children: [
            {path: 'general', component: GeneralComponent, outlet: 'tab'},
            {path: 'tickets', component: TicketsComponent, outlet: 'tab'},
            {path: 'commandes', component: TestSecondComponent, outlet: 'tab'},
            {path: 'stat', component: TestSecondComponent, outlet: 'tab'}
        ]},
    {path: 'organisation/:orga_id/event/:event_id/status-people/:ticket_id', component: StatusPeopleComponent},

So, this is my app-routing.ts, i used a tab router outlet in a page, my route is currently:

http://localhost:4200/admin/organisation/KHY1ODY0ZDUx/event/GKniQWmuVDM2/(tab:tickets)

As you can see i find myself in the router outlet named tab, what i want is: From where i am return to the primary outlet and go to this url :

http://localhost:4200/admin/organisation/KHY1ODY0ZDUx/event/GKniQWmuVDM2/status-people/:ticket-id

I tried a lot of things with routerLink, but nothing worked, can someone explain me how should i do this?

Upvotes: 1

Views: 901

Answers (1)

sloth
sloth

Reputation: 101142

Instead of trying to navigate to a URL directly:

[routerLink]="['/foo/bar']"

you have to set the outlets manually, for example like this:

[routerLink]="[{ outlets: { primary: '/foo/bar', tab: null } }]"

This will open '/foo/bar' in the primary outlet and clear the tab outlet.

Upvotes: 0

Related Questions