多個Angular2路由器在一個應用程序中（RC5）

在我的angular2應用程序中，我有一個全局路由器，它可以瀏覽許多功能，例如，家庭和教程。現在在我的教程組件中，我想要設置另一個路由器來瀏覽不同的步驟。多個Angular2路由器在一個應用程序中（RC5）

所以全球範圍內，這裏是我的文件：

//main.ts: 
// The browser platform with a compiler 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 

// The app module 
import { AppModule } from './app.module'; 

// Compile and launch the module 
platformBrowserDynamic().bootstrapModule(AppModule);

app.routes.ts：

import { homeComponent } from './home/home.component'; 
import { tutorialComponent } from './tutorial/tutorial.component'; 
import { Routes, RouterModule } from '@angular/router'; 

const appRoutes: Routes = [ 
    { path: '', component: homeComponent }, 
    { path: 'tutorial', component: tutorialComponent } 
]; 

export const appRoutingProviders: any[] = []; 

export const routing = RouterModule.forRoot(appRoutes);

和app.component.ts：

import { Component } from '@angular/core'; 
import { sidebarComponent } from './sidebar/sidebar.component'; 
import { navbarComponent } from './navbar/navbar.component'; 
import { homeComponent } from './home/home.component'; 
import { tutorialComponent } from './tutorial/tutorial.component'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <sidebar></sidebar> 
    <navbar></navbar> 
    <router-outlet></router-outlet>`, 
    directives: [sidebarComponent, navbarComponent, homeComponent, ROUTER_DIRECTIVES], 
    precompile: [homeComponent, tutorialComponent] 
}) 
export class AppComponent { }

現在，在我的教程部分，我會像它看起來像這樣：

@Component({ 
    selector: 'tutorial', 
    template: ` 
      <a routerLink="/chapter/1" routerLinkActive="active">Chapter 1</a> 
      <a routerLink="/chapter/2" routerLinkActive="active">Chaoter 2</a> 
      <router-outlet><router-outlet>, 
    directives: [chapterComponent, ROUTER_DIRECTIVES] 
}) 
export class tutorialComponent { 
    public chapters = _chapters; 
    clickedItem: number = 0; 
}

所以我不太清楚如何解決這個問題。我需要重新啓動，我在哪裏定義我的「子路由器」的路由？也許我在我的原始引導中引用了這個，在這種情況下我如何辨別這兩個路由器。我希望這真的是一個子路由器，所以當我導航到教程組件時，我的地址是myDomain.com/tutorial，然後我想調用我的子路由器並獲得像myDomain.coom/tutorial/chapter/1 這樣的路由。文檔聲明只有一個路由器可以用於每個模板，這表明我想要做什麼是可能的？但是沒有提到第二個應該怎麼做。

來源

2016-08-09 George Edwards

更改app.routes.ts中的路由順序，最後一個爲空。 –