2017-05-08 7 views
2

私はこのHTMLを持っている一般的なArtistsのコンポーネントがあります。デフォルトの出口ルート値は角度?

<div tyle="float:left;width:40%;border:solid 1px gray;"> 
    <router-outlet name="left"></router-outlet> 
</div> 

<div style="float:right;width:40%;border:solid 1px orange;"> 
    <router-outlet name="right"></router-outlet> 
</div> 

ペインを左にリスト
ペインには、アーティストに詳細

が含まれている必要がありますが、ここでアーティストを含める必要がありますルートの定義:

const routes: Routes = [ 
    { 
    path: 'artists', 
    component:ArtistsComponent , 
     children: [ 
      { 
       path: 'list', 
       outlet: 'left', 
       component: ArtistListComponent 
      } , 
      { 
       path: ':id', 
       outlet: 'right', 
       component: ArtistDetailsComponent 
      } 
     ] 
} 
, 
    { 
    path: '', 
     pathMatch:'full' , 
    redirectTo: '/artists', 
    } 
] 

アプリが起動しているときに、これは私が

URL参照です:http://localhost:4200/artists

enter image description here

そして私は、左ペインと右ペインの両方を見たい場合は、私はに移動する必要があります

URL:http://localhost:4200/artists/(left:list//right:2)

enter image description here

質問:

がどのように私は、デフォルトの出口ルート値宣言することができますか?

のような何か:

... 
{ 
    default:'list', 
    path: 'list', 
    outlet: 'left', 
    component: ArtistListComponent 
} , 
{ 
    default:'1', 
    path: ':id', 
    outlet: 'right', 
    component: ArtistDetailsComponent 
} 

NB

私はストレート http://localhost:4200/artists/(left:list//right:2)に(起動時)アプリをリダイレクトすることができます知っているが、私は店のデフォルト値を指定することができる場合、私は疑問に思います設定自体

+0

実際のリンクまたはリダイレクトが生成されるデフォルトオプションを使用します。ナビゲーションコンポーネントでは、デフォルトを設定します。つまり、*特定のアクション*をクリックしない限り、送信するパラメータがデフォルトのものになります。 – SrAxi

答えて

1

空のパスでリダイレクトを使用:

const routes: Routes = [ 
{ 
    path: 'artists', 
    component:ArtistsComponent , 
    children: [ 
     { 
     path: '', 
     pathMatch: 'full', 
     redirectTo: 'artists/(left:list)' 
     }, 
     { 
      path: 'list', 
      outlet: 'left', 
      component: ArtistListComponent 
     } , 
     { 
      path: ':id', 
      outlet: 'right', 
      component: ArtistDetailsComponent 
     } 
    ]