关于angular 8.1使用过程中的一些记录


Posted in Javascript onNovember 25, 2020

说起来已经使用了大概一年半的angular,大概已经渐渐习惯了这个前端框架吧,但是具体的原理和底层的代码都没有仔细的看过。

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

首先是勾选状态的保持问题

关于angular 8.1使用过程中的一些记录

在模板中思考了很久,用了各种方法,修改传入值,页码改变以后勾选状态就是会有奇怪的问题,比如在代码里明明把选中的给去掉了,但是页面上还是勾选状态,最后折腾来折腾去,发觉操作的对象不对:页面上的是模板里面的list,就是listpagemodel.list,而我之前一直在操作传入的list,后面操作对象弄对了,只需要操作listpagemodel.list的状态就可以控制页面上的数据。

所以上面给我的经验就是一定要明白页面上展示的数据具体是由哪个对象控制的,对象找对了,控制起来就简单,对象没找对,忙活再久也是白干。

第二个就是自己创建的组件问题

关于angular 8.1使用过程中的一些记录

sl-upload是我自己封装的一个组件

关于angular 8.1使用过程中的一些记录

这是组件内部的代码,很简单,就是包含了nz的一个上传组件,还有一些数据的处理

关于angular 8.1使用过程中的一些记录

比如上传之前的判断大小和类型,还有上传成功的提示之类的。

之所以自己写这部分,是因为nzzorro的组件自己虽然有提供大小控制和上传文件的类型控制,但是限制了以后选中保持以后不会有任何提示。所以就自己封装一下,加上了提示。

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

一开始我单纯的以为只要给[fileList]加上小括号就行

[(fileList)]这样就变成了双向绑定,实际上并没有,小括号加上去以后毫无作用,组件内部只是接收到了这个fileList

关于angular 8.1使用过程中的一些记录

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

关于angular 8.1使用过程中的一些记录

下图的那一行代码

this.fileListChange.emit(this.fileList)

关于angular 8.1使用过程中的一些记录

就是输出用的,只有改变值的时候加上了这一行代码,才算是完成了输出

才让父组件中[(fileList)]中的小括号有了意义,不然加不加小括号都没影响。

这样才可以在父组件中拿到经过子组件修改后的fileList的值了。

到此这篇关于angular 8.1使用过程中的一些记录的文章就介绍到这了,更多相关angular 8.1使用记录内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
javascript针对DOM的应用分析(三)
Apr 15 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
Vue组件生命周期运行原理解析
Nov 25 #Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 #Vue.js
在Vue中使用mockjs代码实例
Nov 25 #Vue.js
javascript实现左右缓动动画函数
Nov 25 #Javascript
JavaScript缓动动画函数的封装方法
Nov 25 #Javascript
js实现缓动动画
Nov 25 #Javascript
JavaScript实现缓动动画
Nov 25 #Javascript
You might like
php session和cookie使用说明
2010/04/07 PHP
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
python递归实现快速排序
2018/08/18 Python
python二进制文件的转译详解
2019/07/03 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
Ruby如何实现动态方法调用
2012/11/18 面试题
社区优秀志愿者先进事迹
2014/05/09 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
招标承诺书
2014/08/30 职场文书
军训个人总结
2015/03/03 职场文书
小学班主任心得体会
2016/01/07 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
Java异常体系非正常停止和分类
2022/06/14 Java/Android