如何在路由配置中根据路由参数直接加载对应组件？

你直接在路由配置里用Exercise + id拼接组件的写法行不通——路由配置是静态初始化的，:id是运行时才会解析的参数，配置阶段根本拿不到这个值。下面是几种能避免重复创建路由的方案：

方案1：用容器组件统一处理动态加载 #

创建一个ExerciseContainerComponent作为路由的目标组件，在这个容器里根据路由参数id动态渲染对应的练习组件。

具体步骤： #

1. 先定义组件映射表，把id和对应的组件关联起来：

// 导入所有练习组件
import { Exercise1Component } from './exercise1.component';
import { Exercise2Component } from './exercise2.component';
import { Exercise3Component } from './exercise3.component';

// 维护id到组件的映射，新增组件时只需要在这里添加
export const EXERCISE_COMPONENT_MAP = {
  '1': Exercise1Component,
  '2': Exercise2Component,
  '3': Exercise3Component
};

2. 路由配置指向容器组件：

const routes: Routes = [
  {
    path: 'exercises/:id',
    component: ExerciseContainerComponent
  }
];

3. 在容器组件中动态加载目标组件：

import { Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { EXERCISE_COMPONENT_MAP } from './exercise-component-map';

@Component({
  // 用ng-template作为组件渲染的容器
  template: `<ng-template #exerciseHost></ng-template>`
})
export class ExerciseContainerComponent implements OnInit {
  // 获取模板容器的引用
  @ViewChild('exerciseHost', { read: ViewContainerRef }) exerciseHost!: ViewContainerRef;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 读取路由参数里的id
    const exerciseId = this.route.snapshot.paramMap.get('id');
    
    if (exerciseId && EXERCISE_COMPONENT_MAP[exerciseId]) {
      // 动态创建组件并渲染到容器中
      this.exerciseHost.createComponent(EXERCISE_COMPONENT_MAP[exerciseId]);
    } else {
      // 处理无效id的情况：比如加载404提示组件，或者跳转错误页
      console.error(`找不到id为${exerciseId}的练习组件`);
    }
  }
}

方案2：结合懒加载的动态导入 #

如果你的练习组件数量很多，且严格遵循ExerciseXComponent的命名规范（文件也对应exerciseX.component.ts），可以用动态import()实现懒加载，不用提前导入所有组件：

在容器组件中修改加载逻辑：

ngOnInit(): void {
  const exerciseId = this.route.snapshot.paramMap.get('id');
  
  if (exerciseId) {
    // 动态导入对应组件文件
    import(`./exercise${exerciseId}.component`)
      .then(module => {
        // 根据类名获取组件类
        const componentClass = module[`Exercise${exerciseId}Component`];
        this.exerciseHost.createComponent(componentClass);
      })
      .catch(err => {
        console.error(`加载练习组件${exerciseId}失败`, err);
        // 处理组件不存在的错误
      });
  }
}

这种方式需要确保：

• 组件文件名和类名严格匹配命名规则
• 你的tsconfig.json配置支持动态导入（比如compilerOptions.moduleResolution设为node16或bundler）

方案3：自定义路由匹配器（进阶） #

如果需要更灵活的路径匹配规则，可以自定义路由匹配器，但本质上还是要结合容器组件的动态加载：

import { UrlSegment, RouteMatcher } from '@angular/router';

// 自定义匹配器，匹配exercises/xxx格式的路径
const exerciseRouteMatcher: RouteMatcher = (url: UrlSegment[]) => {
  if (url.length === 1 && url[0].path.startsWith('exercises/')) {
    const [, id] = url[0].path.split('/');
    return {
      consumed: url,
      posParams: { id: new UrlSegment(id, {}) }
    };
  }
  return null;
};

// 路由配置使用自定义匹配器
const routes: Routes = [
  {
    matcher: exerciseRouteMatcher,
    component: ExerciseContainerComponent
  }
];

之后在容器组件里还是用方案1或2的逻辑加载组件即可。

关键注意点 #

• 务必处理无效id的情况，避免用户输入不存在的组件id导致报错
• 映射表的方式可控性更强，适合组件数量不多或新增无规律的场景；动态导入更适合组件数量多、命名规范的场景

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