Angular中使用ngSwitchCase切换组件时如何配置独立路由

这个需求完全可以通过Angular的嵌套路由（子路由）实现，具体操作步骤如下：

1. 配置嵌套路由规则 #

在你项目对应模块的路由配置文件中，给承载面板的主路由添加children子路由配置，示例如下：

const routes: Routes = [
  // 此处保留你项目原有其他路由配置
  {
    // 主路由路径，:itemId为动态参数，对应你说的item id
    path: 'mainrouterlink/:itemId',
    component: 你的主组件类名, // 替换为你当前内置选择面板的主组件类名
    children: [
      // 三个子路由分别对应三个面板组件
      { path: 'labeling', component: DashboardsRecipeLabelComponent },
      { path: 'activity', component: DashboardsRecipeActivityComponent },
      { path: 'settings', component: DashboardsRecipeSettingsComponent },
      // 可选配置：进入主路由时默认重定向到第一个面板
      { path: '', redirectTo: 'labeling', pathMatch: 'full' }
    ]
  }
];

2. 替换原有ngSwitch逻辑 #

把你现在写的ngSwitch相关的代码全部替换成Angular的路由出口标签<router-outlet>，修改后代码如下：

<div class="mt-0">
  <router-outlet></router-outlet>
</div>

路由出口会自动根据当前访问的子路由路径渲染对应的子组件，不需要你自己手动控制组件显隐。

3. 修改面板选择的跳转逻辑 #

原来切换selectedPanel的逻辑改成路由跳转即可，分两种场景适配：

• 如果是用模板直接绑定点击，直接用routerLink属性绑定：

<!-- 示例：面板选择按钮 -->
<button 
  [routerLink]="['labeling']"
  routerLinkActive="active" <!-- 可选：给当前选中的按钮添加激活样式 -->
>标签面板</button>
<button [routerLink]="['activity']" routerLinkActive="active">活动面板</button>
<button [routerLink]="['settings']" routerLinkActive="active">设置面板</button>

• 如果是在TS逻辑中触发切换，注入Router和ActivatedRoute服务实现相对路径跳转：

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

export class 你的主组件类名 {
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute
  ) {}

  switchPanel(panelName: 'labeling' | 'activity' | 'settings') {
    // 相对当前主路由跳转，不需要写全路径
    this.router.navigate([panelName], { relativeTo: this.activatedRoute });
  }
}

如果子组件需要用到主路由里的item id参数，直接在子组件中注入ActivatedRoute，从父路由参数中获取即可：

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

export class DashboardsRecipeLabelComponent {
  constructor(private activatedRoute: ActivatedRoute) {}
  ngOnInit() {
    const itemId = this.activatedRoute.parent.snapshot.paramMap.get('itemId');
    // 后续用itemId做业务逻辑即可
  }
}

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