2017-05-08 61 views
2

我有有这个HTML一般Artists组件:Angular中的默认出口路线值?

<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', 
    } 
] 

所以当应用到了,这是我看到

网址:http://localhost:4200/artists

enter image description here

如果我想看到这两个左窗格中,右窗格中我应该定位到:

网址: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),但我不知道如果我能在网点指定默认值config本身

+0

我会使用实际链接或重定向生成的默认选项。在导航组件中,我会设置默认值。因此,除非您单击或执行了*特定操作*,否则要发送的参数是默认参数。 – SrAxi

回答

1

使用redirectTo与空路径:

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 
     } 
    ] 

}