Angular+Material Design项目命名router-outlet子路由加载问题咨询

1. 调整路由配置 #

你需要在路由定义中给需要加载到sideContent插座的子路由指定outlet: 'sideContent'属性，懒加载场景下配置示例如下：

// app-routing.module.ts
const routes: Routes = [
  {
    path: '',
    component: SideNavComponent,
    children: [
      // 主插座的常规业务路由
      { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
      { path: 'users', loadChildren: () => import('./users/users.module').then(m => m.UsersModule) },
      // 配置加载到sideContent插座的子路由
      {
        path: 'user-detail/:id',
        outlet: 'sideContent', // 必须指定对应插座名称
        loadChildren: () => import('./user-detail/user-detail.module').then(m => m.UserDetailModule)
      }
    ]
  }
];

2. 正确触发路由跳转 #

模板中使用routerLink跳转 #

<!-- 比如用户列表页的跳转按钮 -->
<button 
  mat-button 
  [routerLink]="['', { outlets: { sideContent: ['user-detail', user.id] } }]"
>
  查看用户详情
</button>

业务代码中用Router服务跳转 #

// 对应component.ts
import { Router } from '@angular/router';

constructor(private router: Router) {}

openUserDetail(userId: string) {
  this.router.navigate([{ outlets: { sideContent: ['user-detail', userId] } }]);
}

3. 联动右侧抽屉开关 #

你需要监听路由事件，当sideContent插座有路由加载时自动打开右侧抽屉，关闭抽屉时清空对应路由：

<!-- 修改SideNavComponent.html的右侧抽屉定义 -->
<mat-drawer #drawerRight class="sidenav" mode="over" position="end" style="width: 700px" (closed)="onSideDrawerClose()">
  <router-outlet name="sideContent"></router-outlet>
</mat-drawer>

// SideNavComponent.ts
import { Router, NavigationEnd } from '@angular/router';
import { ViewChild } from '@angular/core';
import { MatDrawer } from '@angular/material/sidenav';

@ViewChild('drawerRight') drawerRight: MatDrawer;

constructor(private router: Router) {
  // 监听路由变化自动控制抽屉开关
  this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      const hasSideContent = this.router.parseUrl(this.router.url).root.children['sideContent'];
      hasSideContent ? this.drawerRight.open() : this.drawerRight.close();
    }
  });
}

// 抽屉关闭时清空附属路由
onSideDrawerClose() {
  this.router.navigate([{ outlets: { sideContent: null } }]);
}

常见问题排查 #

• 确保路由配置中outlet属性的值和模板中router-outlet的name属性完全一致，大小写敏感
• 懒加载的子模块内部路由不需要重复指定outlet，仅在父层级的路由定义中声明即可
• 跳转路径层级要和路由配置的层级匹配，根路径下的附属路由跳转要在数组第一个参数放空字符串对应根路由

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