Angular自定义组件实现数据双向数据绑定的实例


Posted in Javascript onDecember 11, 2017

学过Angular的同学都知道,输入框通过[(ngModel)]实现双向数据绑定,那么自定义组件能不能实现双向数据绑定呢?答案是肯定的。

Angular中,我们常常需要通过方括号[]和圆括号()实现组件间的交互:

Angular自定义组件实现数据双向数据绑定的实例

那么在[]()的基础上,如何实现组件的双向数据绑定?

例子如下。

子组件:

<!--testDataBinding.component.html-->

<h1>childStatus: {{childStatus}}</h1>
//testDataBinding.component.ts

export class TestDataBindingComponent implements OnInit{
 @Input() childStatus;
 @Output() childStatusChange = new EventEmitter();
 ngOnInit(){
 setTimeout(()=>{
  this.childStatus = false;
  this.childStatusChange.emit(this.childStatus);
 },5000);
 }
}

注意这里的写法,这是关键所在,输出属性前半部分必须与输入属性相同,输入属性可以随意取名,输出属性需在输入属性基础上加上Change,比如你的输入属性是myData,那么输出属性就必须是myDataChange。

父组件:

<!--app.component.html-->

<test-binding [(childStatus)]="parentStatus"></test-binding>
<h1>parentStatus: {{parentStatus}}</h1>
//app.component.ts

import { Component,OnInit } from '@angular/core';
@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
 parentStatus: boolean = true;
 ngOnInit(){
 setTimeout(()=>{
  this.parentStatus = true;
 },10000);
 }
}

在父组件我们初始化parentStatustrue,并把它传到子组件TestDataBindingComponent

在子组件里,5秒后我们把childStatus设为false,看它能不能传到父组件。再过5秒,我们在父组件将parentStatus设为true,看它能不能传到子组件。

Angular自定义组件实现数据双向数据绑定的实例

事实证明,子组件值变化后,父组件的值也跟着变化;父组件值变化后子组件的值也跟着变了!

我们实现了双向绑定!

查看本文代码和效果,可点击这里

以上这篇Angular自定义组件实现数据双向数据绑定的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript设置FieldSet展开与收缩
May 15 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
js document.write()使用介绍
Feb 21 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 #Javascript
Node.js中sequelize时区的配置方法
Dec 10 #Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 #Javascript
关于react中组件通信的几种方式详解
Dec 10 #Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 #Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 #Javascript
利用ES6实现单例模式及其应用详解
Dec 09 #Javascript
You might like
ZF等常用php框架中存在的问题
2008/01/10 PHP
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
PHP实现下载功能的代码
2012/09/29 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
jQuery 获取对象 定位子对象
2010/05/31 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
python的类方法和静态方法
2014/12/13 Python
用C++封装MySQL的API的教程
2015/05/06 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
Python常见数据类型转换操作示例
2019/05/08 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
python selenium操作cookie的实现
2020/03/18 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
如何保障Web服务器安全
2014/05/05 面试题
护理学专业推荐信
2013/12/03 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
企业愿景口号
2015/12/25 职场文书
如何写好活动总结
2019/06/21 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript
Python使用pyecharts控件绘制图表
2022/06/05 Python