How to use a different router outlet for different routes in angular 2

Question

Currently, I am developing a web application with Angular 2.

The base for my application is actually this one: github.com/ngrx/example-app

The parent container of the layout is this one: github.com/ngrx/example-app/blob/master/src/app/containers/app.ts

In a use case I have, I would like a specific route to lead to a page where the whole layout would not be the same. I need an almost chrome-less page that can be stored later as a screenshot, so the menubar is redundant for this case.

This is the container's template:

 <bc-layout>
  <bc-sidenav [open]="showSidenav$ | async">
    <bc-nav-item (activate)="closeSidenav()" routerLink="/" icon="book" hint="View your book collection">
      My Collection
    </bc-nav-item>
    <bc-nav-item (activate)="closeSidenav()" routerLink="/book/find" icon="search" hint="Find your next book!">
      Browse Books
    </bc-nav-item>
  </bc-sidenav>
  <bc-toolbar (openMenu)="openSidenav()">
    Book Collection
  </bc-toolbar>
  <router-outlet></router-outlet>
</bc-layout>

My problem is that I can't figure out how to make the app component use a different router outlet for a specific route. First of all, the ActivatedRoute injected in the AppComponent instance is, by design, different (that is, empty) from the actual ActivatedRoute that the target component of the route gets access to. This means that in the AppComponent I can't even match the url, because it comes empty.

I also tried to manually set a field to a value with a time delay and then use this field as a condition to switch between two router outlets. The first outlet is inside the layout, while the other is outside (so it would render without the bells and whistles). This didn't work either, because it seems that the router outlet is set only once, when the app component is first loaded, and afterwards no rendering occurs to other router outlets.

To sum it up, I would like something like the following (although an alternative solution might work better):

 <bc-layout>
  <bc-sidenav [open]="showSidenav$ | async">
    <bc-nav-item (activate)="closeSidenav()" routerLink="/" icon="book" hint="View your book collection">
      My Collection
    </bc-nav-item>
    <bc-nav-item (activate)="closeSidenav()" routerLink="/book/find" icon="search" hint="Find your next book!">
      Browse Books
    </bc-nav-item>
  </bc-sidenav>
  <bc-toolbar (openMenu)="openSidenav()">
    Book Collection
  </bc-toolbar>
  <router-outlet></router-outlet>
</bc-layout>
   <router-outlet></router-outlet> <---chromeless outlet

Answer 1

If i understand you correctly, then you need to define children routes, so you have multiple router-outlets.

Please read here how children routes works.

https://angular-2-training-book.rangle.io/handout/routing/child_routes.html