angular - 两个 Angular 子路由之间的导航

Question

我有以下路线：

const appRoutes: Routes = [
  {
    outlet: 'primary',
    path: '',
    children: [
      {
        path: 'briefs',
        children: [
          {
            path: '',
            outlet: 'menu',
            component: BrieflistMenuComponent
          },
          {
            path: '',
            outlet: 'main',
            component: BrieflistComponent
          }
        ]
      },
      {
        path: 'brief/:id',
        children: [
          {
            path: '',
            outlet: 'menu',
            component: BriefMenuComponent
          },
          {
            path: '',
            outlet: 'main',
            component: BriefComponent
          }
        ]
      },
      {
        path: '**',
        redirectTo: '/briefs',
        pathMatch: 'full'
      }
    ]
  }
];

• 如何在briefs/和brief/XXX/使用之间导航this.router.navigate(...)？我试过this.router.navigate(['brief', id]);但我收到以下错误：Error: Cannot activate an already activated outlet Error: Cannot activate an already activated outlet.

• 如何将所有未定义的路径重定向到briefs/？

我使用 Angular 5。

Answer 1

我终于自己发现了。对于第一个问题，不应命名两个出口中的一个。对于第二个问题，我添加{ path: '**', redirectTo: '/briefs', pathMatch: 'full' }了主''路径的孩子。

const appRoutes: Routes = [
  {
    outlet: 'primary',
    path: '',
    children: [
      {
        path: 'briefs',
        children: [
          {
            path: '',
            outlet: 'menu',
            component: BrieflistMenuComponent
          },
          {
            path: '',
            // outlet: 'main',
            component: BrieflistComponent
          }
        ]
      },
      {
        path: 'brief/:id',
        children: [
          {
            path: '',
            outlet: 'menu',
            component: BriefMenuComponent
          },
          {
            path: '',
            // outlet: 'main',
            component: BriefComponent
          }
        ]
      },
      {
        path: '**',
        redirectTo: '/briefs',
        pathMatch: 'full'
      }
    ]
  }
];