角2（安定）、出口と経路を持つ経路=空ではない、動作しない..！

Question

以下のようにルータ経路と経路、Angular2で

{ path: 'lefttoggle', redirectTo: 'lefttoggle', pathMatch: 'full', outlet: 'lefttoggle_name'}, 

は、例外がスローされる。

編集：
MainCompnent.template.html

<div><a href="/lefttoggle">click to show left</a></div> 
<div class="col-md-10" style="top:70;left:-1%;position:relative;"> 
      <router-outlet name="righttoggle_name"></router-outlet> 
       <router-outlet name="lefttoggle_name"></router-outlet> 
</div> 

AppRoutesを。 ts

{ path: '', component: AppComponent }, 
    { path: 'lefttoggle', outlet: 'lefttoggle_name', component: LeftToggleComponent}, 
    { path: 'righttoggle', outlet: 'righttoggle_name', component: RightToggleComponent} 

エラーのonClickを生成：

core.umd.js:3462 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: 'lefttoggle' 

Answer 1

あなたがリダイレクトを定義しているが、あなたは実際のコンポーネントとの任意の経路を定義していません。

これを試してみてください：

{ path: '', redirectTo: 'lefttoggle', pathMatch: 'full' }, { path: 'lefttoggle' , component: LeftToggleComponent},

アプリを開くと、'lefttoggle'に、''からリダイレクトされ、そこに実際のコンポーネントがロードされます。 ''からリダイレクトしたくない場合は、その行を削除してください。

重要な要素は、componentを表示することです。

編集：

コードを追加しました。 まだpath: 'lefttoggle'で2つの経路を定義しています。

ルータをlefttoggleからlefttoggleにリダイレクトする方法を教えてください。異なるパスを定義する必要があります。

Answer 2

{ path: '', component: AppComponent }, 
{ path: 'lefttoggle', outlet: 'lefttoggle_name', component: LeftToggleComponent}, 
{ path: 'righttoggle', outlet: 'righttoggle_name', component: RightToggleComponent} 

それはに変更し、

{ path: '', component: AppComponent }, 
{ path: '', outlet: 'lefttoggle_name', component: LeftToggleComponent}, 
{ path: '', outlet: 'righttoggle_name', component: RightToggleComponent} 

私もMainComponent.htmlがAppComponentのHTMLであることを前提としています。

Working DEMO; https://plnkr.co/edit/inHDLkO8qbteUORfjUQl?p=preview