Navigate to sibling child router outlet not working

Question

This is my routes component. Basically i'm routing the outlet to the html tabs

Currently I'm in Transactions page ->TransactionsComponent tab (single).

<a [routerLink]="['../Product',{outlets :{ }}]"></a>

I'm not sure what how should be the routerlink above to to navigate to the FridgeComponent -> 'fridge' outlet directly. I tried different option, none are working.

Please suggest the way to achieve this.

export const ROUTES: Routes = [
  { path: '',  redirectTo:'home', pathMatch: 'full'},
  { path: 'home',  component: HomeComponent, 
      children:[
        {
            path :'', 
            component: HomeOneComponent, 
            outlet:'one'},
        {
            path :'', 
            component: HomeTwoComponent, 
            outlet:'two'
        }
  ]},
  { 
      path: 'Product',  
      component: ProductComponent, 
        children:[
            {path :'', component: TVComponent, outlet:'tv'},
            {path :'', component: ACComponent, outlet:'ac'},
            {path :'', component: FridgeComponent, outlet:'fridge'}
          ]

  },
  { 
      path: 'Transactions',  
      component: TransactionsComponent
  }
];

Mani S Mani S · Accepted Answer · 2017-06-01T14:37:01

This should work for you, you have to assign a value to the path in your routes, even for child routes.

.........  
{ 
  path: 'Product',  
  component: ProductComponent, 
    children:[
        {path :'tv', component: TVComponent, outlet:'tv'},
        {path :'ac', component: ACComponent, outlet:'ac'},
        {path :'fridge', component: FridgeComponent, outlet:'fridge'}
      ]

},
........

And in HTML routerLink, make sure u mention the outlet name and path name

 <a [routerLink]="['/product', {outlets: {'fridge': ['fridge']}}]">                  
 </a>

If you still see the difficulty, please share in Github/plunker.

Navigate to sibling child router outlet not working

1 Answers