2016-07-25 7 views
2

私は新しいroute3を使用していますが、子ルートの補助コンポーネントを指定するURL構文は何か知りたいと思います。angle2の子ルートの補助コンポーネントを指定する方法router3

私は、次のしている子のルート定義:

const router: RouterConfig = [ 
    { 
    path: 'component-c', component: ComponentC, children: [ 
     { path: 'auxPath', component: ComponentAux, outlet: 'aux'}, 
     { path: 'c1', component: ComponentC1 } 
    ] 
    } 
]; 

そしてComponentCのテンプレートはComponentC1

@Component({ 
    selector: 'component-c', 
    template: ` 
    <div>Child Route Component</div> 
    <router-outlet></router-outlet> 
    <router-outlet name="aux"></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 

のようなURL /コンポーネント-C/C1ディスプレイです。しかし、私は /コンポーネント-C(AUX:auxPath)のような多くの組み合わせ試してみた/ C1を、 /コンポーネント-C/C1(AUX:auxPath)まだ、などとは把握することはできませんComponentAuxを表示する方法...

答えて

3

以下のようにURLを作成してください。私の最後の調査現在のルータのバージョン1として

this.router.navigateByUrl('/component-c/(c1//aux:auxPath) 

routerLinknavigate方法を使用してコンセントをAUXへの移動中にいくつかの問題があります。完全なURLを作成し、navigateByUrlを使用する必要があります。

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

URLは兄弟が//
  • で区切られてい
  • )子供のパスが/
  • によって分離されているパスは兄弟を持っている場合、それは、(括弧で囲まれるべき
    1. セマンティクスを以下ました

      アウトレットとパスは、次のように区切られます。

      Parent/child/(gchild1//outletname:gchild2)

    もう1つso question

  • +0

    これは機能します。また、チップのおかげで、私はrouterLinkと同じ問題に遭遇し、メソッドをナビゲートします。 –

    +0

    @Arpitあなたはこの質問を重複した回答としてマークできました。私はリンクされた答えがほぼ同じであることを見ています:) –

    +0

    確かに両方とも質問者の要求に合わせて私の答えです。私は次回から見ることができます。 –

    関連する問題