如何使用角2

目前针对不同的路线不同的路由器出口，我发展与角2如何使用角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

来源

2016-12-05 ʌἁɀɑƿѻѕ ɪɷɑⱴⱴἱɗʜѕ

你可以使用[命名的路由器出口（https://angular.io/docs/ts/latest/api/router/index/RouterOutlet-directive.html）如果你想超过1路由器插座在同一个组件中。 [Here's]（http://onehungrymind.com/named-router-outlets-in-angular-2/）也是一篇很好的文章。 –

问题在于我在根容器AppComponent中需要它，因为这是定义布局的地方。这意味着我必须定义儿童路线。父母和孩子的路线是什么？目前我有{path：'cube/analytics /：id /：algorithm/embed /：part'，canActivate：[CubeExistsGuard]，component：CubeAnalyticsEmbedPage} –

如果我理解正确的话，那么你就需要定义孩子的路线，让你拥有多个路由器插座。

请在这里阅读儿童路线的作品。

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

来源

2016-12-05 13:09:19

是的，我想到了这一点，但是，父母和孩子的组成部分？这是当前路线：{ 路径： '立方体/分析/：ID /：算法/嵌入/：部分'， canActivate：[CubeExistsGuard]，组分：CubeAnalyticsEmbedPage } –

父始终是组件，其中你定义路由器插座。并且路由中定义的子节点将显示在该父路由器插座中。如果您想在一个组件中使用多个路由器插座，则需要使用辅助路由器插座。 –

所以我重构了我的路线。我将它们制作为LayoutComponent的所有子元素（包含菜单的子元素），除了应该是无镶边的元素之外。我还为LayoutComponent添加了一个路由器插座，并将所有的chrome移动到LayoutComponent。现在，位于LayoutComponent子项外部的路由仅使用AppComponent中的路由器插座呈现，因此它呈现无边框。谢谢！ –

如何使用角2

回答

相关问题