CODEWITHSUNDEEP
angular
naoru
naoru

Reputation: 2227

Angular2 named router-outlet not working with RouterLink

I have two outlets in my application that are not related one is unnamed outlet and the correct component is always loaded into it. The other has a name yet its never being loaded

here is the relevant code App.component.html

  <div class="container">
    <app-menu></app-menu>
    <!-- <app-graph-wrapper></app-graph-wrapper> -->
    <router-outlet name = "topbar"></router-outlet>
    <div class="row main-content">
      <div class="two columns" #sidebar><app-side-bar></app-side-bar></div>
      <div class="hide-button" #button><img src="{{icon}}" (click) = "toggleSidebar()" /></div>
      <div class="ten columns" #table>
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>

App.Module.ts

const appRoutes: Routes = [

  { path: 'dashboard', component: AlertTableComponent},
  { path: 'dashboard', component: GraphWrapperComponent, outlet: 'topbar'}

];

as shown in the html file previously the topbar outlet was not there as i had only one component, now however, i need to load there a different component based on view

UPDATE I've done the following changes in my app.module.ts

const appRoutes: Routes = [

  {path: '', redirectTo: 'dashboard', pathMatch: 'full'},
  {path: 'dashboard', component: AlertTableComponent},
  { path: 'dashboardBar', component: GraphWrapperComponent, outlet: 'topbar'},


   { path: 'compliance', component: ComplianceTableComponent },
   { path: 'complianceBar', component: GraphWrapperComponent, outlet: 'topbar'},

  { path: 'network', component: NetworkTableComponent },
  { path: 'networkBar', component: NetworkTopbarComponent, outlet: 'topbar'}
];

so now i can see the whole thing if i type the url http://localhost:4200/dashboard(topbar:dashboardBar)

however my links are now broken I've tried endless combinations with RouterLink directive

<button [routerLink]="['compliance', {outlets: { primary: 'ComplianceTableComponent', topbar: 'complianceBar'}}]">test</button>

yet i get nothing on the console and nothing even happens on the screen

Upvotes: 1

Views: 999

Answers (1)

naoru
naoru

Reputation: 2227

I was able to solve this using the following combination first in my app.module i added these routes {path: 'dashboard', component: AlertWrapperComponent},

  { path: 'operations', component: OverviewWrapperComponent, children : [
      {path: 'event', component: EventTableComponent},
      {path: 'device', component: DeviceTableComponent},
      {path: 'job', component: JobTableComponent},
      {path: '', component: ComplianceTableComponent}
    ]

so when user goes to /operations he will always see the OverviewWrapperComponent whose html lookes like this

<app-overview-topbar></app-overview-topbar>
<div class="row main-content">
  <div class="twelve columns">
    <!-- <app-network-table></app-network-table> -->
    <router-outlet></router-outlet>
  </div>
</div>

this router-outlet there will inject the correct components according the the url so /operations/device will show the DeviceTableComponent

my main html page - app.component.html lookes like this

<div class="container">
  <app-menu></app-menu>
  <router-outlet></router-outlet>
</div>

so i basically have two unnamed components and no need to use the named ones

Upvotes: 1

Related Questions