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 相关文章推荐
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
Javascript string 扩展库代码
Apr 09 Javascript
jquery validate poshytip 自定义样式
Nov 26 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 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 DataGrid 实现代码
2009/08/12 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
webpack4简单入门实例
2018/09/06 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
centos7之Python3.74安装教程
2019/08/15 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
python实现统计代码行数的小工具
2019/09/19 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
Python reques接口测试框架实现代码
2020/07/28 Python
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
八一建军节部队活动方案
2014/02/04 职场文书
工程资料员岗位职责
2014/03/10 职场文书
史上最牛的辞职信
2015/02/28 职场文书
质量承诺书格式范文
2015/04/28 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers