Angular2 父子组件数据通信实例


Posted in Javascript onJune 22, 2017

如今的前端开发,都朝组件式开发模式靠拢,如果使用目前最流行的前端框架Angular和React开发应用,不可避免地需要开发组件,也就意味着我们需要考虑组件间的数据传递等问题,不过Angular 2已经为我们提供了很好的解决方案。

父组件和子组件

接触过面向对象编程的开发者肯定不会对父子关系陌生,在Angular 2中子组件存在于父组件“体内”,并且父子组件可以通过一些渠道进行通讯。

父组件向子组件传入数据 ? @Input

当我们着手开始开发一个组件时,第一件想到的应该就是为其传入数据,毕竟我们期望组件为我们处理某些工作通常就需要给其提供“养料”,毕竟不能又让马儿跑,又不给马儿吃草。Angular 2中子组件使用装饰器@Input接收父组件传入的数据:

// child-component.ts
import { OnInit, Component, Input } from '@angular/core';

@Component({
  selector: 'child-component',
  ...
})
export class ChildComponent implements OnInit {
  @Input
  count: number = 0;

  ngOnInit() {
    console.log(this.count);  // 父组件内传入的值或者我们自己设置的初始值0
  }

  increaseNumber() {
    this.count ++;
  }

  descreaseNumber() {
    this.count --;
  }
}

可以看到,我们使用装饰器@Input修饰了count属性,这就意味着child-component被使用时期望收到一个名为count的属性,当然不属于自己掌控的范围内要小心行事,别人使用我们的组件时什么情况都可能出现,所以我们为count设置了一个初始值,当父组件没有给我们的count属性传值时,我们就取此初始值。

// father-component.ts
import { Component } from '@angular/core';
import { ChildComponent } from '../child-component/child-component';

@Component({
  template: `
    <child-component [count]='initialCount'></child-component>
  `,
  ...
})
export class FatherComponent {
  initialCount: number = 5;
}

父组件使用child-component时,为count属性赋予初始值initialCount,即5,也就是说此时ChildComponent的ngOnInit方法中会打印出5。注意[count]语法标识了数据流向:父组件流入子组件,即单向数据绑定。此时如果传入的数据是基本数据类型,子组件中对数组做任何操作都不会影响到父组件,但如果传入的不是基本数据类型,而是引用数据类型,则要格外注意子组件中对数据的操作可能会对父组件产生影响。

子组件通知父组件数据已处理完成 ? @Output、EventEmitter

父组件传入数据给子组件之后并不是万事大吉了,就像父母养育孩子,供其读书,但孩子需要把学习进度、考试成绩等呈现给父母看(不管是否自愿…),父组件也需要子组件在合适的时机通知自己数据已经处理好,可以检阅了。而此时就需要使用@Output和EventEmitter了。

// father-component.ts
import { Component } from '@angular/core';
import { ChildComponent } from '../child-component/child-component';

@Component({
  template: `
    <child-component [count]='initialCount' (change)="countChange($event)"></child-component>
  `,
  ...
})
export class FatherComponent {
  initialCount: number = 5;

  countChange($event) {

  }
}

看看我们在父组件中加入了什么东东:

1.(change),看到这样的语法第一时间就知道这是事件绑定,也就是说我们在父组件中监听子组件的某些变化,并能够在其变化时作出相关操作;

2.增加了countChange方法作为change事件的处理函数。

但是稍等,当我们为input标签指定type、placeholder等属性时,我们知道它们都已经被“实现了”,所谓“实现”,即这些属性在input标签上是有意义的。但是目前这里我们为child-component指定了名为change的事件是没意义的,因为其并未“实现”change事件,于是下一步我们就需要使用@Output和EventEmitter将其变得有意义:

// child-component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'child-component',
  ...
})
export class ChildComponent {
  @Input
  count: number = 0;

  @Output
  change = new EventEmitter();

  increaseNumber() {
    this.count ++;
    this.change.emit(this.count);
  }

  descreaseNumber() {
    this.count --;
    this.change.emit(this.count);
  }
}

让我们再来看看在子组件中增加了什么东东:

1.使用装饰器@Output修饰了change属性,并为其赋了初值为EventEmitter的实例;

2.在increaseNumber和descreaseNumber方法修改了count属性后,调用了change属性的emit方法通知父组件。

此时,我们在ChildComponent中实现了change,于是父组件中为child-component绑定change事件也就有意义了:当子组件通知父组件时,父组件可以获取到通知中携带的数据并进行下一步操作:

// father-component.ts
...
countChange($event) {
  this.initialCount = $event;
}
...

总结

不知道你有没有发现,其实上面我们模拟了“双向数据绑定”:父组件将数据传入子组件,子组件改变数据时通知父组件进行“同步更新”。但是要注意其实数据流向是单向的,即数据是父组件单向流入子组件,父组件数据的更新是通过子组件的事件通知以后才被更新。也就是说其实在Angular 2中:双向数据绑定 = 单向数据绑定 + 事件,以我们最熟悉的ngModel为例:

<input type='text' name='userName' [(ngModel)]="userName">

和下面的写法是等价的:

<input type='text' name='userName' [ngModel]="userName" (ngModelChange)="userName=$event">

同样的,如果将我们的child-component组件写作双向数据绑定的形式即为:

<child-component [(count)]='initialCount'></child-component>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
js常用排序实现代码
Dec 28 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
JS深入学习之数组对象排序操作示例
May 01 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 #Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 #Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 #jQuery
详解Vue 2.0封装axios笔记
Jun 22 #Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 #Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 #Javascript
vue 请求后台数据的实例代码
Jun 22 #Javascript
You might like
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
js实现打字小游戏
2019/12/17 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
python实现聚类算法原理
2018/02/12 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
毕业生幼师求职自荐信
2013/10/01 职场文书
大学毕业生简单自荐信
2013/11/05 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书