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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
javascript背投广告代码的完善
Apr 08 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
详解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
短波收音机简介
2021/03/01 无线电
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
php HandlerSocket的使用
2011/05/02 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
由document.body和document.documentElement想到的
2009/04/13 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
Position属性之relative用法
2015/12/14 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
js实现左右轮播图
2020/01/09 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
Python pip使用超时问题解决方案
2020/08/03 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
T3官网:头发造型工具
2019/12/26 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
小松树教学反思
2014/02/11 职场文书
2014年纠风工作总结
2014/12/08 职场文书
慰问信范文
2015/02/14 职场文书
答辩状格式范本
2015/05/22 职场文书
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
Pandas 稀疏数据结构的实现
2021/07/25 Python
python 进阶学习之python装饰器小结
2021/09/04 Python
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL