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

前言一个demo应用到项目上的时候总会出现各种各样的问题。
版本问题
文章图片

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

文章图片

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

文章图片

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

constructor(private resolver: ComponentFactoryResolver) {}loadComponent() {const factory: ComponentFactory = 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 = 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层，当提交的时候统一发送给后台。
感谢宇轩同学提供的帮助。