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

我使用正确的解决方案here

更新了您的堆叠闪电战

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

1 个答案: