【发布时间】：2017-04-19 21:05:08
【问题描述】：
目前，我正在使用 Angular 2 开发一个 Web 应用程序。
我的应用程序的基础实际上是这个：github.com/ngrx/example-app
布局的父容器是这个： github.com/ngrx/example-app/blob/master/src/app/containers/app.ts
在我的一个用例中，我想要一个特定的路径来引导一个页面，其中整个布局不会相同。我需要一个几乎没有 chrome 的页面，以后可以将其存储为屏幕截图，因此对于这种情况，菜单栏是多余的。
这是容器的模板：
<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>
我的问题是我不知道如何让应用程序组件为特定路由使用不同的路由器插座。首先，注入到 AppComponent 实例中的 ActivatedRoute 与路由的目标组件访问的实际 ActivatedRoute 不同（即为空），design。这意味着在 AppComponent 中我什至无法匹配 url，因为它是空的。
我还尝试手动将一个字段设置为具有时间延迟的值，然后将此字段用作在两个路由器插座之间切换的条件。第一个出口在布局内部，而另一个在外部（因此它会在没有花里胡哨的情况下呈现）。这也不起作用，因为似乎路由器出口只设置了一次，当应用程序组件首次加载时，然后其他路由器出口不会发生渲染。
总而言之，我想要以下内容（尽管替代解决方案可能效果更好）：
<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
【问题讨论】：
-
如果您想在同一个组件中使用多个路由器插座，您可以使用named router outlet。 Here's 也是一篇很好的文章。
-
这个问题是我需要它在根容器 AppComponent 中，因为这是定义布局的地方。这意味着我必须定义子路线。什么是父母和孩子的路线？目前我有 { path: 'cube/analytics/:id/:algorithm/embed/:part', canActivate: [ CubeExistsGuard ], component: CubeAnalyticsEmbedPage }