2016-08-09 21 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; 
} 

だから私はこれにどのようにアプローチするかについてはあまりよく分かりません。私は再ブートストラップする必要があります、私は "サブルータ"のルートをどこで定義しますか?たぶん私は元のブートストラップでこれを参照しています。この場合、2つのルータ間でどのように識別するべきでしょうか。私はこれを実際にサブルーチンとして機能させたいので、現在チュートリアルコンポーネントに移動すると、私のアドレスはmyDomain.com/tutorialです。私はサブルーチンを呼び出し、myDomain.coom/tutorial/chapter/1 のようなルートに行きたいと思います。 ドキュメントでは、1つのテンプレートで1台のルータしか使用できないと述べています。しかし、第二のもののために何をすべきかについての言及はない。少し遅れてのパーティに多分私が、私はそれがRC5に来るとき、このplunkerは役に立ち以上であることが判明し

+0

ルートの順序をapp.routes.tsに変更します。最後は空のルートになります。 –

答えて

0

それは私が子供「のチュートリアルを作成する必要があることが判明し"モジュールに独自の子ルートを設定し、Officialドキュメントの危機管理センターに記載されているようにapp.module.tsに登録します。

関連する問題