Question

目前，我正在使用Angular 2开发一个Web应用程序。

我的应用程序的基础实际上就是这个：github.com/ngrx/example-app

布局的父容器是这样的： github.com/ngrx/example-app/blob/master/src/app/containers/app.ts

在我的一个用例中，我想要一个特定的路径来指向整个布局不一样的页面。我需要一个几乎无铬的页面，以后可以将其存储为截图，因此菜单栏对于这种情况来说是多余的。

这是容器的模板：

 <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是design，与路由的目标组件可以访问的实际ActivatedRoute不同（即为空）。这意味着在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

如何在角度2中为不同的路线使用不同的路由器插座

0 个答案: