Angular Routing 子路由答案

【问题标题】：Angular Routing child routesAngular Routing 子路由
【发布时间】：2021-05-26 00:47:44
【问题描述】：

我对路由有一个很奇怪的问题。到目前为止，这是我的代码：

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 的不同位置，但似乎没有一个工作。对我的错误有什么想法吗？

【问题讨论】：

您可以尝试删除“{ path: '', component: GroupsComponent, outlet: 'start-outlet' },”（即，'permissions' 是唯一的子路由）并重新尝试？我认为问题可能出在两条没有路径的后续路线上。如果是这样的话，我会写进一步的解释。
我希望你已经正确注册了 for root 和 for child 路由，如果你能在 stackblitz 上分享你的代码或类似的例子，那就太好了。
删除此行后，GroupsComponent 未在路径上显示它之前可见，并且组/权限仍然有错误。

标签： javascript angular typescript routes

【解决方案1】：

我创建了一个 StackBlitz 代码示例。这里是： https://stackblitz.com/edit/angular-ivy-fxcqoy?file=src/app/menu/menu/menu.component.html

【讨论】：