Angular2はコンポーネントから兄弟コンポーネントにナビゲートし、最初のコンポーネントを破棄することはありません。

Question

私はAngular2の学習を始めました。このような非常に一般的な "リスト詳細"スタイルページを作成したいと考えています：http://xgrommx.github.io/rx-book/index.html。左のバーで項目をクリックすると、中央の詳細ビューへのナビゲーションが開始され、左のバーは引き裂かれません。この効果を達成する最良の方法は何ですか？

私の現在の設計は、次のようなものです：

私は自宅のコンポーネントを起動すると、リストコンポーネント（child1のは）すぐにロードされ、それが名前（名前のみ）を取得するために、外部APIを呼び出しますのアイテムのリスト左側の項目名をクリックすると、新しいDetail-componentが作成されます。詳細コンポーネントは、そのngOnInitメソッドの項目の詳細を取得します。私は補助ルートを使って2つの子コンポーネントを同じページにネストしようとしましたが、うまくいかないようです。以下のようなリストの成分で

<h2>Home</h2> 

    <router-outlet></router-outlet> 

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

そして、私は詳細ビューにナビゲートする方法は、（移動呼んでいる）：マイホームルートを次のようになります。

export const HomeRoutes: RouterConfig = [ 
    { 
    path: '', 
    redirectTo: '/home', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'home', 
    component: HomeComponent, 
    children: [ 
     { 
     path: '', 
     component: ListComponent 
     }, 
     { 
     path: ':item', 
     component: DetailComponent 
     outlet: 'detail' 
     } 
    ] 
    } 
]; 

そして、私のhome.component.tsに、私は単純にこれを持っていますこの：

onSelect(item : string) { 
    this.router.navigate(['/detail', item]); 
    } 

しかし、毎回私は詳細ビューが表示されない項目のいずれかをクリックして、それはこのようなエラーが表示されます。

Error: Uncaught (in promise): Error: Cannot match any routes: 'home/item' 
. 

私は補助ルートを使用しているのですか？この機能を実現する方法はありますか？

Answer 1

現在のルータバージョンは、routerLinkおよびnavigateメソッドを使用してAUXコンセントに移動する際に問題があります。完全なURLを作成し、navigateByUrlを使用する必要があります。

this.router.navigateByUrl('/home/(list//detail:detail) 

プランカとexample。詳細ボタンをクリックし、次に管理者をクリックします。管理者は管理者のアウトレットにルーティングされます。全画面で開き、URLの形成を確認します。

URLが

1. 子パスがパスは兄弟を持っている場合は、括弧
2. 兄弟が//

3. アウトレットで区切られていて、それを囲む必要があります/

4. によって分離された意味を以下ました

   親/子/（gchild1 //出口名：gchild2）

0で区切られます。

もうそうquestion