Question

在我的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;
 }

所以我不太清楚如何处理这个问题。我是否需要重新引导，在哪里为我的＆＃34;子路由器定义路由＆＃34;？也许我在我的原始引导程序中引用它，在这种情况下如何识别两个路由器之间。我希望这真的充当子路由器，所以当我导航到当前的教程组件时，我的地址是myDomain.com/tutorial，然后我想调用我的子路由器并进入像myDomain.coom/tutorial/chapter/1这样的路由。文档说每个模板只能使用一个路由器，这表明我想做什么是可能的？但是没有提到如何为第二个做什么。

Answer 1

我参加派对可能有点晚了，但我发现这个傻瓜在RC5时更有帮助：

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

Answer 2

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

一个应用程序中的多个Angular2路由器（RC5）

2 个答案: