angular - Angular辅助路由懒加载时报错: Cannot match any routes.

Question

我正在尝试进行嵌套子路由调用以加载到辅助路由器 socket 中，但我似乎无法使其工作。我一直收到 Error: Cannot match any routes. URL Segment:'header/secondary/abc'

StackBlitz 链接: https://stackblitz.com/edit/angular-ivy-t3x2cw?file=src/app/header/header.component.ts

我的预期结果 是在正常路由器 socket 的左侧加载 Secondary 和 Abc 模块/组件 <router-outlet></router-outlet> ，以及要在辅助路由右侧加载的测试组件 <router-outlet name="aux"></router-outlet> .如下图所示。

Answer 1

有几个问题:

首先，注意 header.component.html 的内容:

<div>
  <router-outlet></router-outlet>
</div>
<div>
  <router-outlet name="aux"></router-outlet>
</div>

和header组件的路由:

const routes: Routes = [
  {
    path: '',
    component: HeaderComponent,
    children: [
      { path: '', redirectTo: 'secondary', pathMatch: 'full' },
      {
        path: 'secondary',
        loadChildren: () =>
          import('./../secondary/secondary.module').then(
            (m) => m.SecondaryModule
          ),
      },
    ],
  },
];

组件 View 想要显示的内容与路由配置描述的内容不匹配。根据经验，组件 X View 中的内容必须与组件 X 在路由配置中需要的内容相对应。在这种情况下，header 组件的 View 需要一个named outlet，aux，但是在路由配置中只有primary 的路径网点(即二级)。

所以，如果你想让你的组件处理多个导出，你可以这样做:

// header.component route configuration

const routes: Routes = [
  {
    path: '',
    component: HeaderComponent,
    children: [
      { path: '', redirectTo: 'secondary', pathMatch: 'full' },
      {
        path: 'secondary',
        loadChildren: () =>
          import('./../secondary/secondary.module').then(
            (m) => m.SecondaryModule
          ),
      },
      
      // !
      {
        path: 'foo',
        outlet: 'aux',
        component: FooComponent,
      },
    ],
  },
];

navigate() 方法看起来像这样:

navigate() {
    this.router.navigate([
      "header",
      {
        // key-value pairs
        // `key`: the **name** of the outlet
        // `value`: the paths defined for the outlet
        outlets: {
          primary: ["secondary", "abc"],
          aux: ["foo"]
        }
      }
    ]);
  }

StackBlitz demo .

此外，如果您想了解更多关于 Angular Router 的信息，我建议您查看:

• Angular Router: Revealing some interesting facts and features
• Demystifying angular/router: what is RouterScroller and why is it useful ?