リダイレクトで角2ルーターの補助ルートが動作しない

Question

最近Angular Router（V3.0.0）と組み合わせてAngle 2.0.0に基づいて新しいプロジェクトを開始しました。それで私は補助ルートに問題があります。

ナビゲーションバー、メインコンテンツ、フッターなどのすべての状態に表示されるさまざまなビューでアプリケーションを分割したいと考えています。そのため、ユーザーがページの一部だけを変更する必要があるfeの内容）が変更され、他のすべてのビューはそのまま残されます。 は、したがって、私はこの講演で述べたように、ルータの補助機能を使用したい：

Angular Router Talk @AC2015

次のように私は私のファイルを設定：

app.html

<router-outlet name="navigation"></router-outlet> 

<main> 
    <router-outlet></router-outlet> 
</main> 

<router-outlet name="footer"></router-outlet> 

をapp.routes.ts

import {Routes} from '@angular/router'; 

export const rootRouterConfig: Routes = [ 
    {path: '', redirectTo: 'start(navigation:/navigation)', pathMatch: 'full'} 
]; 

start.routes.ts

import {Routes} from '@angular/router'; 
import {StartContentComponent} from './startContent/startContent.component'; 
import {StartNavigationComponent} from "./startNavigation/startNavigation.component"; 

export const startRouterConfig: Routes = [ 
    {path: 'start', component: StartContentComponent}, 
    {path: 'navigation', component: StartNavigationComponent, outlet: 'navigation'} 
]; 

今の問題がある：私は手動で両方のコンポーネントが正しく表示されているブラウザのURLに

http://localhost:3000/#/start(navigation:/navigation) 

を入力した場合。しかしapp.routes.tsでのリダイレクトが動作していないとhttp://localhost:3000/#/にアクセスするとき、私は次のエラーを取得する：

Uncaught (in promise): Error: Cannot match any routes: ''

公式角度2つのドキュメントは、それが将来的に説明することだけはまだ補助ルーティングについては何も言いません。それ以外は私はいくつかの他のブログポストを見つけたが、リダイレクトと組み合わせて補助ルートについて議論した人はいなかった。

誰かが私の問題が何であるかを知っていますか？

私の欲しいものを達成するためにページを構造化する別の方法がありますか？

Ui-routerに切り替えるべきでしょうか？

Answer 1

私は同じ問題を抱えていましたが、バイナリ氏の解決策は正しかったようですが、this siteの 'Componentless Routes'部分に私がいました。

私のソリューション：

export const RedirectionIncludingAuxRoutes: RouterConfig = [ 
    { 
     path: 'redirect-me', 
     redirectTo: 'redirected-with-aux' 
    }, 
    { 
     path: 'redirected-with-aux', 
     children: [ 
      { 
       path: '', 
       component: PrimaryComponent 
      }, 
      { 
       path: '', 
       component: SecondaryComponent, 
       outlet: 'auxiliary' 
      } 
     ] 
    } 
] 

Answer 2

変更するパーツが多い場合は、これをお勧めします。とにかく
は

redirectTo: 'start(navigation:/navigation)' 
to 
redirectTo: 'start/(navigation:navigation)' 

そして

{path: 'start', component: StartContentComponent}, 
{path: 'navigation', component: StartNavigationComponent, outlet: 'navigation'} 
to 
{path: 'start', component: StartContentComponent, 
    children: [ 
     {path: 'navigation', component: StartNavigationComponent, outlet: 'navigation'} 
]}, 

を変更してみてください。また、私は、ルータに、この記事をお勧めします：
http://blog.angular-university.io/angular2-router/

Answer 3

あなたはほとんどそこにあります。一歩足を離してください。あなたは私があなたのために働く1知ってみましょう、次のいずれかの方法

import {Routes , RouterModule } from '@angular/router'; 

@NgModule({ 
    imports: [RouterModule.forRoot(rootRouterConfig)], 
    exports: [RouterModule], 
}) 

OR

import {ModuleWithProviders } from '@angular/core'; 
import {Routes , RouterModule } from '@angular/router'; 

export const routing: ModuleWithProviders =RouterModule.forRoot(rootRouterConfig); 

でrootRouterConfigを配線する必要があります。