Angular 5路由配置：如何重定向到子命名路由出口？

当然可以仅通过路由配置实现这个需求！你当前的重定向规则没明确指定辅助路由的目标，所以没法自动激活qux命名出口的组件。咱们调整一下BazComponent下的空路径重定向配置就行：

核心修改点是把redirectTo: ''改成redirectTo: '(qux:0)'，这样Angular就知道要在qux命名出口加载对应的QuxComponent了。

修改后的完整路由配置如下：

{
  path: 'foo',
  component: FooComponent,
  children: [
    {
      path: ':barId',
      component: BarComponent,
      children: [
        {
          path: '',
          redirectTo: 'baz',
          pathMatch: 'full'
        },
        {
          path: 'baz',
          component: BazComponent,
          children: [
            {
              path: '',
              redirectTo: '(qux:0)', // 明确指定辅助路由目标
              pathMatch: 'full'
            },
            {
              path: '0',
              outlet: 'qux',
              component: QuxComponent
            }
          ]
        }
      ]
    }
  ]
}

这样配置后，当用户访问/foo/:barId/baz时，Angular会匹配到BazComponent下的空路径规则，自动重定向到/foo/:barId/baz/(qux:0)，成功激活QuxComponent在qux命名出口中，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Ivan Aguilar