关于动态表单遇到的一些问题

前言

一个demo应用到项目上的时候总会出现各种各样的问题。

版本问题

在编写项目时，照着前几天的实验demo写，viemContainerRef.createComponent<A>(B),B是A接口的实现类，但是在这里B却报错了，一开始没仔细看报错详细信息，以为是B对A的继承关系有问题，但是检查了后并没有错。去网上找了一番后也没有发现解决办法。然后我去查看源码，

发现方法参数需要一个工厂类而不是一个子类，感到了疑惑，怎么demo里没问题呢。又去demo里看了一下源码。

发现参数类型并不相同，发现是angular版本问题，项目用的是angular12版本，而demo用的是angular13版本。最终原因是版本问题造成的。
去谷歌viemContainerRef.createComponent()的使用实例，网上还是老版本的使用，照着写上

constructor(private resolver: ComponentFactoryResolver) {}

loadComponent() {
    
  const factory: ComponentFactory<FormItemTypeComponent> = this.resolver.resolveComponentFactory(FormItemTextComponent);

  const viewContainerRef = this.formItem.viewContainerRef;

  const componentRef = viewContainerRef.createComponent(factory);
  componentRef.instance.formItem = formItem；
}

后来又去了的老版本的angular官网，也发现了类似的写法。

引用问题

@ViewChild(FormItemDirective, {static: true})
formItem!: FormItemDirective;

loadComponent() {
for (var i = 0; i < this.task.formItems.length; i++) {
  const formItem = this.task.formItems[i];

  console.log(this.formItem);

  const factory: ComponentFactory<FormItemTypeComponent> =
    this.resolver.resolveComponentFactory(FormItemTextComponent);

  const viewContainerRef = this.formItem.viewContainerRef;

  const componentRef = viewContainerRef.createComponent(factory);
  componentRef.instance.formItem = formItem;
}

遇到一个undefined问题，此时的formItem是使用@ViewChild注解注入进来的，这个也没有什么报错信息，只能猜了。为了防止版本问题，我也查看了12版本的官方代码和源码，并没有什么问题。
官方实例里指令跟组件在一个模块里，没有通过@ViewChild注解注入进来，猜测可能是由于没有引入指令，而指令跟组件在不同的模块里，我尝试将两者放入同意模块已排除不是引用的错误，也没有解决问题。
一时没有了思路，在宇轩同学的帮助下，找到了问题所在。
解决办法是将ViewModule引入TaskModule中，ViewModule是指令所在组件的所在模块，TaskModule是大功能模块的总模块。

├── add
├── directive
├── edit
├── form-item-type
├── index
├── item-add
├── item-edit
├── item-view
├── task-routing.module.ts
├── task.module.ts
└── view

但是为什么改这个就可以了，我俩都没有想明白。

其他一些问题

在动态表单里，后台返回的表单项数组必然不可能存入一个组件进去，而前台需要每个表单项类型所对应组件动态加载，如果单纯的写if语句进行挨个判断，使用动态表单又成了无用功，想到可以使用HashMap数据结构，将表单项类型与对应组件存储起来，用的时候获取表单项类型所对应组件。
表单传值也是一个问题，不同于传统的v层将每个标单项罗列在一起。想法是通过将每个表单值先传到m层，当提交的时候统一发送给后台。
感谢宇轩同学提供的帮助。