错误:在 Angular 中使用路由器插座名称时，无法匹配任何路由

Question

我正在使用角度 6，我想用路由创建模态，为此我使用名为的路由器插座，但是当我尝试进入模态的路由时，会出现错误消息：

错误：

未捕获(承诺中(：错误：无法匹配任何路由。网址 分段："配置文件"错误：无法匹配任何路由。网址段： "个人资料">

我的 2 个路由器插座位于同一位置

export const routes: Routes = [
  {
    path: '', component: LayoutComponent,
    canActivate: [AuthenticationGuard, AuthorizationGuard],
    canActivateChild: [AuthenticationGuard, AuthorizationGuard],
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'deals',
      },
      {
        path: 'deals',
        component: DealsComponent,
      },
      {
        outlet: 'modal',
        path: 'profile',
        component: ProfileComponent,
        data: {
          title: 'My Profile',
          sidebar: {
            category: 'profile',
            text: 'My Profile',
            icon: 'person',
          },
        }
      },

我正在使用[routerLink]="['', {outlets: { modal: 'profile' } } ]"来链接。

我做了一个问题的工作示例：https://stackblitz.com/edit/angular-asicvf

有人可以帮助我吗？谢谢

Answer 1

我会为modal对象使用数组

<a [routerLink]="['', {outlets: { modal: ['profile'] }} ]">LINK</a> 

您还应该更改子路由的顺序，并将redirectTo放在数组的末尾，因为它将在 Angular 读取其他路由之前匹配您的所有路由。

<小时 />

实际上，您的路由格式不正确。您应该将所有路线置于同一级别，并且不要使用主路线的 children 属性。像这样：

export const routes: Routes = [
  { path: '', component: AppComponent },
  { path: 'deals', component: HelloComponent },
  {
    outlet: 'modal',
    path: 'profile',
    component: Hello2Component,
    data: {
      title: 'My Profile',
      sidebar: {
        category: 'profile',
        text: 'My Profile',
        icon: 'person',
      },
    }
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'deals',
  },
];

我在这里用正确的解决方案更新了您的堆栈闪电战