Angular09 数据绑定、响应式编程、管道
2017-08-24 17:19
288 查看
1 数据绑定的分类
1.1 单向数据绑定
1.1.1 属性绑定 -> 数据从组件控制类到组件模板
DOM属性绑定HTML属性绑定
1.1.2 事件绑定 -> 数据从组件模板到组件控制类
DOM事件绑定自定义事件绑定
1.2 双向数据绑定
组件模板和控制类的数据可以双向流通2 属性绑定
请参见《揭秘angular2》 P1622.1 DOM属性绑定
2.2 HTML属性绑定
2.2.1 普通HTML属性绑定
2.2.2 CSS类绑定
2.2.3 Style样式绑定
3 事件绑定
事件绑定分为DOM事件绑定和自定义事件绑定请参见《揭秘angular2》 P165
3.1 DOM事件绑定
用()将DOM节点的事件名称包起来,然后用 = 连接一个模板语句;形如:(click)= "onClick()",当DOM节点的单击事件触发后就会执行onClick()方法中的语句3.2 自定义事件
顾名思义就是为组件A自定义一个事件E,当在组件B中使用组件A时,当组件A的事件E被触发后组件B就会检测到,从而执行响应的逻辑;此时组件A是组件B的子组件,事件E是自定义事件3.2.1 引入相关类
在子组件中的控制类中引入 Output 和 EventEmitterimport { Component, OnInit, Output, EventEmitter } from '@angular/core';
3.2.2 定义输出属性
定义一个输出属性作为子组件的自定义事件@Output() sidenavEvent = new EventEmitter<void>();
代码解释:new EventEmitter<void>();中的void表示自定事件出发时,父组件接收到的参数类型,此处为void表名不向父组件传递任何数据
技巧01:子组件传递数据必须和定义输出属性时指定的传递类型一致
技巧02:数据放在输出属性的emit()方法中,例如:this.sidenavEvent.emit(需要传输的数据);
技巧03:父组件通过 $event 来接收数据,$event就代表子组件传递的所有数据
3.2.3 设置触发时机
为自定义事件设置触发时机(即:什么情况下自定义事件会被触发,只用自定义事件被触发后才可以向),一般情况下都是子组件的一个DOM事件被触发后才会触发子组件的自定义之间3.2.4 绑定自定义事件
在父组件中就像绑定DOM事件一样来绑定自定义事件代码解释:自定义事件 sidenavEvent 被触发后就会执行控制类中的 onSidenavEvent 方法
4 双向绑定
请参见《揭秘angular2》 P1685 响应式编程
每个表单元素都对应一个FormController对象,当表单元素的值发生变化时对应的FormController对象就会发送一个valueChange事件,该事件会将表单元素的值编程一个流(即:可观察对象),我们通过订阅这个流来获取这个值,然后根据这个值进行一些处理在模板中通过DOM属性绑定的方式将表单元素和对应的FormController对象绑定在一起
6 管道
请参见《揭秘angular2》 P1886.1 创建自定义管道
ng g pipe 管道名称6.2 使用自定义管道
相关文章推荐
- LINQ编程实战之TreeView动态绑定数据
- 当控件被数据绑定时,无法以编程方式向 DataGridView 的行集合中添加行。
- Vue实现双向绑定的原理以及响应式数据
- (十)、Angular4.0 数据绑定、管道
- 编程在线Windows8客户端实现之数据绑定
- 新闻页面参数传递(非编程方式绑定数据)
- 数据绑定应该算是Spring MVC的特点之一吧~简单易用且功能强大,极大地简化了我们编程人员对于用户输入数据的接收及转换。 早先版本的Spring中的数据绑定完全都是基于PropertyEditor
- 当控件被数据绑定时,无法以编程方式向 DataGridView 的行集合中添加行
- Vue实现双向绑定的原理以及响应式数据的方法
- 网页编程小经验-数据绑定dictionary
- ASP.NET 3.5核心编程学习笔记(18):数据绑定表达式
- LINQ编程实战之TreeView动态绑定数据
- DataGridView数据绑定到支持更改通知并允许删除的IBindinglist,否则不能以编程的方式移除
- Vue实现双向绑定的原理以及响应式数据
- 2013 编程之美 初赛第二场 管道系统小数据
- 当控件被数据绑定时,无法以编程方式向 DataGridView 的行集合中添加行
- “当控件被数据绑定时,无法以编程方式向 DataGridView 的行集合中添加行。” 的解决一法
- ASP.NET 3.5核心编程学习笔记(17):基于数据源的数据绑定
- PB动态数据管道技术实用编程
- 网络编程(15)—— 实现利用管道保存客户端数据的socket服务端