Angular multiple outlet多路由出口配置 侧边栏跳转加载组件异常

问题1解决方法 #

你当前的写法失效核心原因是content命名路由出口定义在NavMenuComponent的模板内，只有当主路由匹配到/navbar/:moduleId、NavMenuComponent正常渲染时，这个出口才存在。你的原routerLink写法会清空主路由内容，导致content出口被销毁，组件自然无法加载。

第一步：修改路由配置，将content出口路由设为NavMenuComponent的子路由 #

const routes: Routes = [
  { path: '', redirectTo: '/', pathMatch: 'full' },
  { 
    path: 'navbar/:moduleId', 
    component: NavMenuComponent,
    // 所有需要渲染到content出口的路由都放在children数组中
    children: [
      { path: 'entitylist/:menuItemId', component: EntityListComponent, outlet:"content"},
      { path: 'profile/:profileId', component: ProfileMasterComponent, outlet:"content" }
    ]
  }
];

第二步：修改侧边栏链接的routerLink写法，使用相对路由跳转 #

首先在NavMenuComponent中注入ActivatedRoute：

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

@Component({/* 组件配置 */})
export class NavMenuComponent {
  constructor(private activatedRoute: ActivatedRoute) {}
}

然后修改nav-menu.html中的链接：

<a [routerLink]="['.', {outlets:{content:['entitylist',menuItem.id]}}]" [relativeTo]="activatedRoute">{{menuItem.name}}</a>

该写法会基于当前的/navbar/:moduleId路径更新content出口的路由，不会销毁主路由的NavMenuComponent，EntityListComponent就可以正常加载到指定区域。

问题2实现方案 #

所有需要渲染到蓝色边框content区域的组件，都按照上面的规则在NavMenuComponent的children数组中配置路由，指定outlet:"content"。
在EntityListComponent等内部组件跳转时，同样使用相对路由+指定content出口的写法即可，示例如下：

1. 首先在EntityListComponent中注入ActivatedRoute

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

@Component({/* 组件配置 */})
export class EntityListComponent {
  constructor(private activatedRoute: ActivatedRoute) {}
}

2. 模板内跳转链接写法：

<!-- 示例：跳转到profile组件 -->
<a [routerLink]="['.', {outlets:{content:['profile', userId]}}]" [relativeTo]="activatedRoute">查看用户资料</a>

跳转时只会更新content出口的内容，侧边栏、头部区域都不会重新渲染。

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