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 jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
javascript操作cookie
Jan 17 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 Javascript
JavaScript 中的六种循环方法
Jan 06 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
制作美丽的拉花
2021/03/03 冲泡冲煮
php函数的常用方法及注意之处小结
2011/07/10 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
javascript事件模型代码
2007/07/01 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
javascript实现密码验证
2015/11/10 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
wxpython学习笔记(推荐查看)
2014/06/09 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
浅谈Python type的使用
2019/11/19 Python
python如何调用字典的key
2020/05/25 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
采购主管岗位职责
2014/02/01 职场文书
股权转让协议书
2014/04/12 职场文书
项目安全员岗位职责
2015/02/15 职场文书
校园新闻稿范文
2015/07/18 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS