Angular命名router-outlet如何展示顶级路由？已复现/b路由匹配错误

问题根因 #

你遇到的报错是因为Angular默认路由匹配仅针对无名称的主router-outlet，你配置的b路径绑定了named命名出口，属于辅助路由，直接访问/b时路由会在主出口的配置中搜索对应路径，自然匹配失败。

可选解决方案 #

方案1：保持现有路由配置，使用正确的访问格式

不需要修改现有路由代码，按照Angular辅助路由的URL格式访问即可：

• 主出口加载a、named出口同时加载b：访问 http://localhost:4200/a(named:b)
• 仅named出口加载b、主出口留空：访问 http://localhost:4200/(named:b)

如果是代码内跳转，写法如下：

• routerLink 写法

<a [routerLink]="['/', { outlets: { named: 'b' } }]">跳转到命名出口B</a>

• TS 代码跳转写法

import { Router } from '@angular/router';

constructor(private router: Router) {}

goToB() {
  this.router.navigate(['/', { outlets: { named: 'b' } }]);
}

方案2：保持直接访问/b的需求，调整路由配置

如果要实现直接输入http://localhost:4200/b就能加载命名出口的B组件，可以将命名路由嵌套到b路径的子路由中，同时给主出口匹配一个空组件（不需要内容的话）：

1. 先新增一个空组件用于主出口占位

@Component({
  selector: 'app-empty',
  template: ''
})
export class EmptyComponent {}

2. 修改路由配置

const routes: Routes = [
  {
    component: AComponent,
    path: 'a'
  },
  {
    path: 'b',
    children: [
      // 命名出口匹配B组件
      {
        path: '',
        component: BComponent,
        outlet: 'named'
      },
      // 主出口匹配空组件，不需要主出口内容就保留这个，有需要换成对应组件即可
      {
        path: '',
        component: EmptyComponent
      }
    ]
  }
];

修改后直接访问/b即可正常加载named出口的B组件，符合你保留b为顶级路由的需求。

内容的提问来源于stack exchange，提问作者Jay