angular - Flera Angular2-router i en app (RC5)

I min Angular2-applikation har jag en global router, som navigerar genom ett antal funktioner, t.ex. hem och handledning. Nu i min handledningskomponent vill jag sätta upp en annan router för att navigera genom de olika stegen.

Så globalt sett, här är mina filer:

//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);

och 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 { }

Nu i min handledningskomponent skulle jag vilja att det såg ut så här:

@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;
 }

Så jag är inte riktigt säker på hur jag ska närma mig detta. Behöver jag re-bootstrapa, var definierar jag rutterna för min "sub-router"? Kanske refererar jag detta i min ursprungliga bootstrap, i så fall hur skiljer jag mellan de två routrarna. Jag skulle vilja att detta verkligen fungerar som en subrouter, så när jag navigerar till tutorial-komponenten just nu, är min adress myDomain.com/tutorial, jag skulle då vilja anropa min subrouter och komma till rutter som myDomain.com/tutorial/chapter/1. Dokumentationen anger att endast en router kan användas per mall vilket antyder att det jag vill göra är möjligt? Men det finns inget omnämnande om vad man ska göra för den andra.

Svar #1

Jag kanske är lite sen till festen, men jag fann denna plunker vara mer än hjälpsam när det gäller RC5:

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

Svar #2

Det visar sig att jag behöver skapa en barnmodul "tutorial" med sina egna barnrutter och sedan registrera den i min app.module.ts som beskrivs med kriscentret i de officiella dokumenten.