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 相关文章推荐
js控制分页打印、打印分页示例
Feb 08 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
详解AngularJS 模块化
Jun 14 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 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
我的论坛源代码(一)
2006/10/09 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
js实现点击生成随机div
2020/01/16 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
Python实现常见的回文字符串算法
2018/11/14 Python
python 进程池pool使用详解
2020/10/15 Python
python温度转换华氏温度实现代码
2020/12/06 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
蔻驰法国官网:COACH法国
2018/11/14 全球购物
Java的五个基础面试题
2016/02/26 面试题
安全责任书模板
2014/07/22 职场文书
党员倡议书
2015/01/19 职场文书
总经理助理岗位职责
2015/01/31 职场文书
python装饰器代码解析
2022/03/23 Python