Angular 中的默认出口路线值？

Question

我有一个通用的 Artists 组件，其中包含 HTML ：

<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

如果我想同时查看左窗格和右窗格，我应该导航到：

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

问题：

如何声明默认出口路线值？

类似于：

...
{
   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) ，但我想知道我是否可以在配置本身中为插座指定默认值

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

}

Angular 中的默认出口路线值？

Default outlet routes values in Angular?

javascript

angular-routing

angular