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

在两个Angular儿童路线之间导航

1 个答案: