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

• 如何使用this.router.navigate(...)在briefs/和briefs/ brief/XXX/之間導航？ 我嘗試過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'
      }
    ]
  }
];