2016-08-09 3 views
2

В моем приложении 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 . В документах указано, что только один маршрутизатор может использоваться для каждого шаблона, который предлагает то, что я хочу сделать, возможно? Но нет упоминания о том, что делать для второго.

+0

Измените порядок маршрутов в app.routes.ts, пустой в конце. –

ответ

0

Оказывается, что мне нужно, чтобы создать ребенка «учебник »со своими дочерними маршрутами, а затем зарегистрировать его в моем app.module.ts, как описано в кризисном центре в документах Official.

Смежные вопросы