关于typescript:加深理解自定义控制器

47次阅读

共计 868 个字符,预计需要花费 3 分钟才能阅读完成。

序言

此次次要通过学习老师所写代码,更加深刻的学习教程的常识。

一、自定义控制器的了解

1.registerOnChange

 咱们能够学习到:在子组件的 value 值产生扭转时,能够通过 this.xxx.valueChange 来监听子组件 input 的 value 的变动,由此弹射数据,使父组件产生扭转:

 其中 fn 是弹射的办法,作用是扭转父组件 formControl 的值。

2.writeValue

 该办法次要是负责初始化子组件 formControl 的 value,接管父组件的初始化的值,赋值给子组件 

3.registerOnTouched

 在教程中咱们并没有遇到其应用,然而在我的项目中咱们遇到了问题:咱们想要在子组件 formControl 设置为 touched 之后,将父组件的 formControl 也设置为 touched:

解决:

本人的解决思路:

 还是应用 this.xxx.valueChange 来进行 touched 的监听,最初始终没有成果,便看了老师的代码:

老师的办法:

viewChild,个别用作组件注入等,在这里能够将图中的整体认为一个选择器,检测与该选择器对应的元素属性是否产生扭转,如果扭转,将执行下图:

 在该办法中:获取了 textArea 这个元素并监听了其 blur 属性,如果有扭转,则执行 this.onTouchedFn:

 而 this.onTouchedFn 便是 fn,将父组件的 formControl 的 touched 的值设置为 true。

过程中遇到的问题:

通过在控制台中打印发现:三者均执行在初始化的时候,而我之前的了解是 registerOnChange 和 resigterOnTouched 均执行在 value 产生扭转和点击的时候执行。

 产生该误区的起因是在 value 产生扭转的时候便会执行 resigterOnChange 的 fn 办法,把数据监听的功绩算到了 resigterOnChange 头上,然而真正的功绩应该是 this.xxx.valueChanges 的。因为在初始化的时候执行过 resigterOnChange 办法,使其被 valueChanges 监听了。

正文完
 0