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 相关文章推荐
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
vue中v-for加载本地静态图片方法
Mar 03 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
Node.js实现断点续传
Jun 23 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
字母顺序颠倒而单词顺序不变的php代码
2010/08/08 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
JS实现小米轮播图
2020/09/21 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
python实现大文件分割与合并
2019/07/22 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
C/C++程序员常见面试题一
2012/12/08 面试题
社团招新策划书
2014/02/04 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
股东合作协议书
2014/04/14 职场文书
认购协议书范本
2014/04/22 职场文书
经验交流材料格式
2014/12/30 职场文书
党员个人承诺书
2015/04/27 职场文书
人与自然观后感
2015/06/16 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书