潍坊百度微信小程序_Angular2 父子组件数据通信实

阅读  ·  发布日期 2021-01-11 16:51  ·  admin
Angular2 父子组件数据通信实例       这篇文章主要介绍了Angular2 父子组件数据通信实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

父组件和子组件

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

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

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

// ponent.ts
import { OnInit, Component, Input } from '@angular/core';
@Component({
 selector: 'ponent',
export class ChildComponent implements OnInit {
 @Input
 count: number = 0;
 ngOnInit() {
 console.log(this.count); // 父组件内传入的值或者我们自己设置的初始值0
 increaseNumber() {
 this.count ++;
 descreaseNumber() {
 this.count --;

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

// ponent.ts
import { Component } from '@angular/core';
import { ChildComponent } from '../ponent';
@Component({
 template: `
 ponent [count]='initialCount' /ponent 
export class FatherComponent {
 initialCount: number = 5;

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

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

// ponent.ts
import { Component } from '@angular/core';
import { ChildComponent } from '../ponent';
@Component({
 template: `
 ponent [count]='initialCount' (change)="countChange($event)" /ponent 
export class FatherComponent {
 initialCount: number = 5;
 countChange($event) {

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

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

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

但是稍等,当我们为input标签指定type、placeholder等属性时,我们知道它们都已经被“实现了”,所谓“实现”,ponent指定了名为change的事件是没意义的,因为其并未“实现”change事件,:

// ponent.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
 selector: 'ponent',
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.;

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

此时,ponent绑定change事件也就有意义了:当子组件通知父组件时,父组件可以获取到通知中携带的数据并进行下一步操作:

// ponent.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"

ponent组件写作双向数据绑定的形式即为:

代码如下:
ponent [(count)]='initialCount' /ponent

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