乐趣区

关于javascript:angular-81使用中的一些记录

说起来曾经应用了大略一年半的 angular,大略曾经慢慢习惯了这个前端框架吧,然而具体的原理和底层的代码都没有认真的看过。

前阵子以前做的一个我的项目有了新的需要,而且比拟麻烦,讲讲做的过程中遇到的一些问题

首先是勾选状态的放弃问题

在模板中思考了很久,用了各种办法,批改传入值,页码扭转当前勾选状态就是会有奇怪的问题,比方在代码里明明把选中的给去掉了,然而页面上还是勾选状态,最初折腾来折腾去,察觉操作的对象不对:页面上的是模板外面的 list, 就是 listpagemodel.list,而我之前始终在操作传入的 list, 前面操作对象弄对了,只须要操作 listpagemodel.list 的状态就能够管制页面上的数据。

所以下面给我的教训就是肯定要明确页面上展现的数据具体是由哪个对象管制的,对象找对了,管制起来就简略,对象没找对,忙活再久也是白干。

第二个就是本人创立的组件问题

sl-upload 是我本人封装的一个组件

这是组件外部的代码,很简略,就是蕴含了 nz 的一个上传组件,还有一些数据的解决

比方上传之前的判断大小和类型,还有上传胜利的提醒之类的。

之所以本人写这部分,是因为 nzzorro 的组件本人尽管有提供大小管制和上传文件的类型管制,然而限度了当前选中放弃当前不会有任何提醒。所以就本人封装一下,加上了提醒。

其中遇到的一个不解的问题就是双向绑定的问题

一开始我单纯的认为只有给 [fileList] 加上小括号就行
[(fileList)] 这样就变成了双向绑定,实际上并没有,小括号加上去当前毫无作用,组件外部只是接管到了这个 fileList

后续的操作,父组件(严格来讲其实包了三层,是祖孙组件了)外面是拿不到子组件对 fileList 的批改的,因为只是单纯的传入了这个值。当初要拿子组件对 fileList 批改后的值,就须要加上输入,也就是 @Output

下图的那一行代码

this.fileListChange.emit(this.fileList)


就是输入用的,只有扭转值的时候加上了这一行代码,才算是实现了输入
才让父组件中 [(fileList)] 中的小括号有了意义,不然加不加小括号都没影响。

这样才能够在父组件中拿到通过子组件批改后的 fileList 的值了。

退出移动版