两条Angular子路线之间的导航

Question

I have the following routes:

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

• How can I navigate between briefs/ and brief/XXX/ using this.router.navigate(...) ? I tried this.router.navigate(['brief', id]); but I get the following error: Error: Cannot activate an already activated outlet Error: Cannot activate an already activated outlet .

• How to redirect all undefined paths to briefs/ ?

I use Angular 5.

Answer 1

I finally found out by myself. For the first question, one of the two outlets should not be named. For the second question, I added { path: '**', redirectTo: '/briefs', pathMatch: 'full' } to the children of the main '' path.

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