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