Angular 路由子路由

Question

我對路由有一個很奇怪的問題。 到目前為止，這是我的代碼：

app.component.html

<router-outlet></router-outlet>

主路由模塊

const routes: Routes = [
  { path: "", component: LogOnComponent },
  { path: "groups",  loadChildren: () => import ('./groups/groups.module').then(m => m.GroupsModule), canActivate: [AuthGuard]},
];

Groups.module 中的子路由

const routes: Routes = [
  { path: '', component: MenuComponent, children: [
      { path: '', component: GroupsComponent, outlet: 'start-outlet' },
      { path: 'permissions', component: PermissionsComponent, outlet: 'start-outlet' }
    ]
  }, 
];

並且 Menu.component 與子路由有一行

<router-outlet name="start-outlet"></router-outlet>

在 Groups.component 我想將用戶重定向到組/權限，就像組路由中所說的那樣。

<a [routerLink]="['permissions']" [state]="{ groupId: content.data.groupId }">link</a>

問題是重定向不起作用。 Angular 說找不到這條路線

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'groups/permissions' Error: Cannot match any routes. URL Segment: 'groups/permissions'

我究竟做錯了什么？ 嘗試了不同的permissions放置，但似乎沒有一個工作。 對我的錯誤有任何想法嗎？

Answer 1

我創建了一個 StackBlitz 代碼示例。 這里是： https://stackblitz.com/edit/angular-ivy-fxcqoy?file=src/app/menu/menu/menu.component.html