Angular2 父子组件数据通信实例
如今的前端开发,都朝组件式开发模式靠拢,如果使用目前最流行的前端框架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 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一天一大 leet(分割数组的最大值)难度:困难-Day20200725
- 一天一大 leet(矩阵中的最长递增路径)难度:困难-Day20200726
- 一天一大 lee(克隆图)难度:中等-Day20200812
- 一天一大 lee(有效的括号)难度:简单-Day20200814
- 一天一大 leet(判断子序列)难度:简单-Day20200727
- 一天一大 leet(寻宝)难度:困难-Day20200729
- LeetCode刷题记录(easy难度21-40题)
- 一天一大 lee(移除盒子)难度:困难-Day20200815
- LeetCode刷题记录(easy难度1-20题)
- 改变 Python 中线程执行顺序的方法
- 一天一大 leet(整数拆分)难度:中等-Day20200730
- iOS客户端启动速度优化实践
- 一天一大 leet(魔术索引)难度:简单-Day20200731
- 一天一大 lee(回文对)难度:困难-Day20200806
- 一天一大 lee(扫雷游戏)难度:中等-Day20200820