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