多个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中的路由顺序，最后一个为空。 –