如何使用角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中的路由器插座呈現，因此它呈現無邊框。謝謝！ –

回答

相關問題