Angular5 navigate to secondary route in nested route from app root component

3
votes

See example at: https://angular-4zfq9r.stackblitz.io/home

Code at: https://stackblitz.com/edit/angular-4zfq9r

I have root component AppComponent with router-outlet.

I have a HomeModule with

  • HomeComponent
  • MessageComponent

HomeComponent has a named router-outlet 'message'

Routing configuration: AppModule : { path:'hello', component:HelloComponent } // not relevant HomeModule : { path:'home', component:HomeComponent, children:[ { path:'message', component:MessageComponent, outlet:'message'} ] }

A router link to message without specifing primary route works from within the homecomponent.

<a [routerLink]="[{outlets:{message:['message']}}]">[message from home]</a>

The above routerlink does not work from within App root component. When primary route is added, it works but I don't want to specifiy primary route, because I want to activate message for whatever child component that is active at that moment. And message route-outlet must be inside HomeComponent because it's contents must be relative to the HomeComponent

Url generated in app root = /home(message:message)

Url generated in home = /home/(message:message)

Any way to get this working ?

1
angularrouting

1 Answers

1
votes

I use this to solve my similar problem 

<a [routerLink]="['', { outlets: { message: ['message'] } }]">Contact</a>