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 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
JavaScript学习历程和心得小结
Aug 16 Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 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
PHP5中MVC结构学习
2006/10/09 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
JavaScript 的继承
2011/10/01 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
python实现名片管理系统
2018/11/29 Python
python:接口间数据传递与调用方法
2018/12/17 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
python中entry用法讲解
2020/12/04 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
挂职思想汇报
2013/12/31 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
个人校本研修方案
2014/05/26 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
干部考察材料范文
2014/12/24 职场文书
初婚初育证明范本
2015/06/18 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
go web 预防跨站脚本的实现方式
2021/06/11 Golang
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫