角2，RC5內其它路由器出口

Question

我試圖做一個項目裏面另一個路由器插座一個路由器出口路由器出口：

它會像這樣：

在第一路由器出口它將具有兩個視圖：

• AUTH組分（/登錄）

• 管理員組分（/管理員）

然後在第二齣口將是管理組件內，與它自己的路由，這將使得這些：

• 儀表板（/管理員）

• 輪廓（/管理/輪廓）

• 用戶（/管理/用戶）

現在，在Angular 2文檔中，我可以看到他們使用模塊進行了這種實現。但我不想使用多個模塊（或我必須？）。

有沒有辦法讓這個實現沒有分離模塊？

我想要一個管理區域的默認組件，這就是爲什麼我想要第二個路由器插座，例如：儀表板將具有HeaderComponent，LeftNavComponent和DashboardCompoent。但是配置文件頁面也會包含所有這些HeaderComponent和LeftNavComponent，並且唯一會改變的是ProfileComponent，所以它將具有基本相同的結構。我想我不需要爲每個不同的管理頁面重複每次導入。我想只有一個主要管理組件，它將基於當前路線創建動態內容。

我已經在互聯網上試過並搜索了很多，但我能找到的唯一例子是來自官方的Angular 2文檔。但他們正在用多個模塊來實現這一點。

Answer 1

雖然推薦模塊，但它們對於任何路線導航都是可選的。

您可以像下面那樣配置路由而不需要任何模塊。

app.routing

import { Routes, RouterModule } from '@angular/router'; 

     import { DashboardComponent, 
     AdminComponent, 
     ProfileComponent, 
     UsersComponent 
     } from './app.component'; 

     const appRoutes: Routes = [ 
     { 
     path: '', 
     redirectTo: '/dashboard/admin/users', 
     pathMatch: 'full' 
     }, 
     { 
     path: 'dashboard', 
     component: DashboardComponent, 
     children:[ 
     { 
     path : 'admin', 
     component: AdminComponent, 
     children:[ 
      { 
      path : 'users', 
      component: UsersComponent 
      }, 
      { 
      path : 'profile', 
      component: ProfileComponent 
      } 
     ] 
     } 
     ] 
    } 
    ]; 

    export const routing = RouterModule.forRoot(appRoutes); 

部件

import { Component }   from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h3 class="title">Routing Deep dive</h3> 
    <hr /> 
    <router-outlet></router-outlet> 
    ` 
}) 
export class AppComponent { 
} 


@Component({ 
    template: ` 
    <h3 class="title">Dashboard</h3> 
    <nav> 
    </nav> 
    <hr /> 
    <router-outlet></router-outlet> 
    ` 
}) 
export class DashboardComponent { 
} 

@Component({ 
    template: ` 
    <h3 class="title">Admin</h3> 
    <nav> 
     <a routerLink="users" routerLinkActive="active" >Users</a> 
     <a routerLink="profile" routerLinkActive="active" >Profile</a> 
    </nav> 
    <hr /> 
    <router-outlet></router-outlet> 
    ` 
}) 
export class AdminComponent { 
} 

@Component({ 
    template: ` 
    <h3 class="title">Profile</h3> 
    ` 
}) 
export class ProfileComponent { 
} 

@Component({ 
    template: ` 
    <h3 class="title">Users</h3> 
    <hr /> 
    ` 
}) 
export class UsersComponent { 
} 

這裏是Plunker !!

希望這有助於！