Angular12如何为传入不同配置的同一Form组件生成独立自定义路由

方案1：动态路由参数实现（推荐） #

无需新增表单时修改路由配置，适合表单数量多、后续会持续新增的场景。

1. 配置路由 #

修改路由配置，添加带动态参数的路由规则：

const routes: Routes = [
  // 注意：动态路由要放在所有固定路由之后，避免拦截其他正常路由
  { path: ':formId', component: Form },
  // 如果你需要统一前缀，也可以配置为 path: 'form/:formId'，对应路由为 /form/form1
];

2. 组件内获取参数加载对应配置 #

在Form组件中引入ActivatedRoute获取路由参数，搭配HttpClient加载对应json配置：
首先确保你已经在对应模块中导入了HttpClientModule用于请求静态资源。

import { ActivatedRoute } from '@angular/router';
import { HttpClient } from '@angular/common/http';

export class Form implements OnInit {
  // 存储表单配置
  formQuestions: any[];

  constructor(
    private route: ActivatedRoute,
    private http: HttpClient
  ) {}

  ngOnInit() {
    // 获取路由中的表单标识，如访问 /form1 时拿到的值为 form1
    const formId = this.route.snapshot.paramMap.get('formId');
    // 加载对应json配置，注意请将所有json配置存放在src/assets目录下
    this.http.get(`./assets/${formId}.json`).subscribe(questionConfig => {
      this.formQuestions = questionConfig;
      // 拿到配置后即可渲染对应表单
    });
  }
}

方案2：固定路由映射实现 #

适合表单数量固定、路由路径需要自定义的场景，路由路径无需和json文件名绑定。

1. 配置路由 #

给每个表单配置独立路由，全部指向同一个Form组件，通过路由的data属性传递配置路径：

const routes: Routes = [
  {
    path: 'form1',
    component: Form,
    data: { configPath: './assets/form1.json' }
  },
  {
    path: 'user-info', // 路由路径可自定义，无需和json文件名一致
    component: Form,
    data: { configPath: './assets/form2.json' }
  },
  {
    path: 'apply-record',
    component: Form,
    data: { configPath: './assets/form3.json' }
  }
];

2. 组件内读取配置 #

在Form组件中获取路由data中传递的配置路径，加载对应表单配置：

ngOnInit() {
  const configPath = this.route.snapshot.data['configPath'];
  this.http.get(configPath).subscribe(questionConfig => {
    this.formQuestions = questionConfig;
  });
}

注意事项 #

• 所有表单json配置文件必须存放在src/assets目录下，否则Angular打包时不会将其作为静态资源打包，会出现404错误
• 使用动态路由方案时建议增加参数校验逻辑，若传入的formId不存在对应配置，可跳转到404页面或给出提示
• 若表单配置不会频繁变动，可直接将配置内容写在路由的data字段中，省去请求json文件的步骤，加载速度更快

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