複数のコンポーネントを持つRouterConfig（@ angle/router：3.0.0-beta.2）

Question

このアップデートされた角度ルータで異なるコンポーネントにRouterConfigをバインドすることは可能ですか？

例えば、私は私の「app.components.ts」上の2つのコンポーネントがあります。このコンポーネントで

@Component({ 
    template: require('./app.component.html'), 
    directives: [ ROUTER_DIRECTIVES ] 
}) 

テンプレートは、子コンポーネントのカスタムビューの装飾+ルータ・アウトレットを含んでいます。

export const insideRoutes: RouterConfig = [ 
    { path: 'dashboard', component: DashboardComponent } 
]; 

自分のルータがあり、指定されたルートにこのコンポーネントをロードします。

また、私はトップレベルのコンポーネントを持っています。このコンポーネントで

@Component({ 
    selector: 'app', 
    pipes: [], 
    providers: [ AppState ], 
    template: '<router-outlet></router-outlet>', 
    directives: [ ROUTER_DIRECTIVES ] 
}) 

テンプレートはちょうどカスタム（ログイン）ページを持つことになります。

export const outsideRoutes: RouterConfig = [ 
    { path: 'login', component: LoginComponent } 
)} 

と私は上記のみRouterConfig上のルートを使って、このコンポーネントをロードします。

私はこのような "app.routes.ts" の両方RouterConfigのを含めることを試みています：

export const appRouterProviders = [ 
    provideRouter([outsideRoutes, insideRoutes]) 
]; 

リンクされた "appRouterProviders" "main.browser.ts" 内のアプリケーションのブートストラップへ：

export function main(initialHmrState?: any): Promise<any> { 
    return bootstrap(AppComponent, [ 
    ...PROVIDERS, 
    ...DIRECTIVES, 
    ...PIPES, 
    ...APP_PROVIDERS, 
    ...ENV_PROVIDERS, 
    ...HTTP_PROVIDERS, 
    appRouterProviders, 
    provide(LocationStrategy, { useClass: HashLocationStrategy }) 
    ]).catch(err => console.error(err)); 
} 

ルータのエラーが発生しました。そのような

私はちょうど1 RouterConfigを使用している場合は、：。

export const appRouterProviders = [ 
    provideRouter(outsideRoutes) // or insideRoutes 
]; 

それは動作しますが、それが唯一のルータ出口を有する唯一の私のルートコンポーネント（トップレベルのコンポーネントを、使用しています

で「angular2：2.0.0-beta.14」少なくとも私は上のこの作品だ。古いと便利@RouteConfigとを

Answer 1

たぶん私はあなたのエラーの理由を持ってあなたは1、ないprovideRouter([outsideRoutes, insideRoutes]) より良い方法に2 RouteConfigsを組み合わせる必要があります。スプレッド演算子を使用してそれを行うには...：

export const appRouterProviders = [ 
    provideRouter([...outsideRoutes, ...insideRoutes]) 
]; 

Answer 2

さて、私は「app.component.ts」の代わりに、複数のRouterConfigのさまざまなコンポーネントへのつもり別々のルーティングです。

子にリダイレクトされる「中間」コンポーネントが作成されました。それを「メニュー」と呼んだ。

ルートコンポーネント（app.component.ts）が唯一のトップレベルのコンポーネントがあります。ここでは

@Component({ 
    selector: 'app', 
    pipes: [], 
    providers: [ AppState ], 
    template: '<router-outlet></router-outlet>', 
    directives: [ ROUTER_DIRECTIVES ] 
}) 

を私はちょうどログインページ（LoginComponent）が表示されます。

"LoginComponent"から "AppMenuComponent"にリダイレクトされます。このメニューコンポーネントには、古いテンプレート（template：require（ './ app.component.html'） - カスタムデコレーションと子供用コンポーネントのための独自のルーターコンセント）があります。それは次のようになります。

@Component({ 
    template: require('./app.component.html'), 
    directives: [ ROUTER_DIRECTIVES ] 
}) 

「app-menu.component.ts」と呼ばれる別個のファイルです。私が言ったように

export const routes: RouterConfig = [ 
    { path: 'login', component: LoginComponent }, 
    { path: 'menu', component: AppMenuComponent, 
    children: [ 
     { path: '', component: AppMenuComponent }, 
     { path: 'dashboard', component: DashboardComponent } 
    ] 
    } 
]; 

は、ログインページの後、 "メニュー" コンポーネントがロードされます。（ "app.routes.ts" で）RouterConfig -

最終段階。それは、トップレベルのコンポーネントのルータアウトレットではなく、 "メニュー"コンポーネントのルータアウトレットを使用するすべての子コンポーネントを含みます。