一个应用程序中的多个 Angular2 路由器 (RC5)答案

【问题标题】：Multiple Angular2 routers in one app (RC5)一个应用程序中的多个 Angular2 路由器 (RC5)
【发布时间】：2016-08-09 22:42:54
【问题描述】：

在我的 angular2 应用程序中，我有一个全局路由器，它可以导航许多功能，例如家和教程。现在在我的教程组件中，我想设置另一个路由器来浏览不同的步骤。

所以在全球范围内，这是我的文件：

//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 这样的路由 . 文档指出每个模板只能使用一个路由器，这表明我想做的事情是可能的？但是没有提到第二个要做什么。

【问题讨论】：

改变app.routes.ts中路由的顺序，最后是空的。

标签： angular typescript angular2-routing

【解决方案1】：

我参加聚会可能有点晚了，但我发现这个 plunker 对RC5 很有帮助：

https://angular.io/resources/live-examples/router/ts/plnkr.html

【讨论】：

【解决方案2】：

事实证明，我需要创建一个具有自己的子路由的子“教程”模块，然后将其注册到我的app.module.ts，如Official 文档中的危机中心所述。

【讨论】：