angular - 属性修饰器的使用

参考文章

https://zhuanlan.zhihu.com/p/65764702

 

例子：

以前的代码，针对表格的滚动区高度动态设置代码，需要在每个组件里利用ResizeObserver监听表格容器尺寸变化，然后动态修改滚动区高度，这样在代码里存在大量的相似冗余

 

 

引入属性修饰器，能够抽象公共代码，如下

 

业务组件里按照下面使用，参数为nzScroll属性对应的变量名

 

 

修饰器函数在类加载时执行，接收的参数target为类的原型prototype，key为属性名tbcontainer

对prototype设置访问器属性，那么在对tbcontainer赋值时，就会触发get/set函数（知识点）

 

框架会在ngAfterViewInit钩子里对tbcontainer初始赋值，并且在后续变更检测过程中会持续变更tbcontainer属性(ngAfterViewChecked钩子拿到)。为了避免重复创建resizeObserver，需要判空处理；并且为了避免内存泄漏，需要在监测到对tbcontainer赋值为null时，执行observer.disconnect，释放监听