关于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 相关文章推荐
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
js单词形式的运算符
May 06 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
浅谈javascript的调试
Jan 28 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
vue实现短信验证码输入框
Apr 17 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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
php设计模式之委托模式
2016/02/13 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
iOS10推送通知开发教程
2016/09/19 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
JavaScript中json使用自己总结
2013/08/13 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
js实现时钟定时器
2020/03/26 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
Python 通过URL打开图片实例详解
2017/06/01 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
python retrying模块的使用方法详解
2019/09/25 Python
Python request操作步骤及代码实例
2020/04/13 Python
zooplus波兰:在线宠物店
2019/07/21 全球购物
中秋晚会活动方案
2014/08/31 职场文书
法人代表资格证明书
2015/06/18 职场文书
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技