问题描述
我正在尝试进行嵌套子路由调用以加载到辅助路由器插座中，但我似乎无法使其工作。我不断收到 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
我的预期结果是在普通路由器出口 <router-outlet></router-outlet> 的左侧加载 Secondary 和 Abc 模块/组件，在 aux 的右侧加载测试组件路线<router-outlet name="aux"></router-outlet>。如下图所示。
解决方法
有几个问题：
首先，注意 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
),},],];
组件视图想要显示的内容与路由配置描述的内容不匹配。根据经验，组件 X 视图中的内容必须与组件 X 在路由配置中的要求一致。在这种情况下，header 组件的视图需要一个命名出口，aux，但在路由配置中只有主要出口的路径（即secondary）。
所以，如果你想让你的组件处理多个出口，你可以这样做：
// header.component route configuration
const routes: Routes = [
{
path: '',// !
{
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"]
}
}
]);
}
此外，如果您想阅读更多关于 Angular Router 的信息，我建议您查看：