CODEWITHSUNDEEP
angularhtml
Freestyle09
Freestyle09

Reputation: 5508

Angular 6 - two router outlets

I want to configure multiple router outlets in Angular 6, my problem is that I have second template to change 3 pages, outlet and name doesnt work. 

<aside [hidden]="!menu">
  <button class="menu-btn" (click)="menu = false" routerLink="/" >Strona Główna</button>
  <button (click)="menu = false" routerLink="/portfolio" >Portfolio</button>
  <button (click)="menu = false" routerLink="/bio" >BIO</button>
  <button (click)="menu = false">Kontakt</button>
  <button (click)="menu = false">Coś</button>
</aside>
<button [class.aside]="menu" (click)="showMenu()">Klik</button>

<router-outlet></router-outlet>

I want one template in portfolio, bio and kontakt.

<div class="background d-flex align-items-center ">
  <div class="container">
    <div class="text d-flex justify-content-center">
      Header
    </div>
  </div>

</div>
<div class="body">

  <router-outlet name="body" ></router-outlet>
  <!-- <div class="header d-flex justify-content-center">
      Portfolio
  </div> -->
</div>

app.module:

const appRoute = [
  { path: '', component: HomeComponent },
  { path: 'portfolio', component: PortfolioComponent, outlet: 'body' },
  { path: 'bio', component: BioComponent },
  { path: '**', component: HomeComponent }
]

Upvotes: 1

Views: 1061

Answers (1)

Robert Leeuwerink
Robert Leeuwerink

Reputation: 489

Why do you want to do that? when you can just do something like this? Angular/router.io

const crisisCenterRoutes: Routes = [
  {
    path: 'crisis-center',
    component: CrisisCenterComponent,
    children: [
      {
        path: '',
        component: CrisisListComponent,
        children: [
          {
            path: ':id',
            component: CrisisDetailComponent
          },
          {
            path: '',
            component: CrisisCenterHomeComponent
          }
        ]
      }
    ]
  }
];

Upvotes: 2

Related Questions