详解Angualr 组件间通信

angualr 组件间通信

约定： 遵循angular官方的说法，下文中的angularjs代指1.x版本，angular代指angular2及以后的升级版本。

采用angular（或者任意mv＊）的前端框架开发单页应用（spa）时，我们都可能会遇见如下的场景：

a组件和b组件之前需要相互通信，或是a路由状态需要知道b路由状态的信息等等业务需求。

这个时候就需要设计到采用一套合理的通信方案来解决数据同步，数据通信的问题。

angularjs 组件间的数据通信

在angularjs中，也就是angular js 1.x版本中，我们需要实现控制器间的通信，有很多种方案，常见的有：

1. 采用 sharedservice, 利用共享的公共服务来实现数据交换。  

angularjs中的service被设计成单例的，这为这一方案，提供来底层的实现可行性，这一方案也是被广泛采用的。

2. 利用angularjs提供的事件机制，$rootscope.$broadcast/ $scope.$emit 配合 $on 方法实现。

该方案的实现具备一定的局限性，比如：$emit方法只能向上传递事件，而不能实现向下的事件传播。但是进行合理的搭配组合已经基本够用了。

3. 利用浏览器的sessionstorage或者localstorage进行数据交换。

由于浏览器提供的这两类本地存储方案都提供了相应的storage事件，所以我们也可以使用该方案进行数据交换。使用该方案是应该注意及时清理无关数据。

4. 采用响应式的编程思想或者观察者模式的应用。关于这一类实现，需要经历一个编程思想的转变，之后会通过专门的文章进行记录。

5. 自身实现共享变量池。这个难度比较大，没有一定的设计能力并不推荐。

由于angularjs并不是本文的重点，所以这里只简单的提一下。后面介绍的angular的方案也有许多可以通用的地方。

angular 组件间的数据通信

sharedservice

共享服务方案在新的angular中依然可以使用，而且无需额外的学习成本。这里在之前的学习笔记里有记录，不再纪录了。

sharedservice 搭配 rxjs

听说 sharedservice 和 rxjs 搭配更实用哦！这里的学习成本在于 rxjs ,rxjs只是 rx思想的js实现。这里强烈推荐学习rx编程思想， 她的学习收益比绝对让你想象不到。

rxjs不需要我们不断的手动去sharedservice中检查数据是否产生了变更，而是在数据有变化时，主动将变动的数据推送给感兴趣的任何订阅者。

举个栗子：

我们有一份随时可能会发生变动的数据存在了服务a中，在没有使用rxjs（或是类似框架／库）的情况下，我们想要知道数据的变化， 我们可能会采用轮询的机制去不断的询问服务a，我们关心的数据是否发生了变化，如果变化了就做出相应的动作。我们处于一种盲目的主动状态。

更高级一点的实现，就是我们可能把服务a实现称为一个可被观察的对象，这样我们便能通过观察服务a的状态来获取数据的变动。

现在我们来使用rxjs实现，rxjs现在可以理解为更高级的观察者模式实现。当使用来rxjs之后，在服务a中的数据发生变化时，服务a会主动 将变动的数据推送给每一个感兴趣的‘消费者'，这些消费者处于被动接受数据，自主处理数据的状态中。rxjs不同于普通观察者模式的地方在于， 它提供来一系列的数据操作方法，比如：filter， map等等。这样就便于我们更加精细的处理数据。

下面通过一段简单的示例代码来感受一下：

import { injectable } from '@angular/core';
import { subject } from 'rxjs/subject';
import { observable } from 'rxjs/observable';

@injectable()
export class dataservice {

 private data: any;
 private subject: subject<any> = new subject<any>();

 setdata(data: any): void {
 this.data = data;
 this.subject.next(data);
 }

 getdata(): observable<any> {
 return this.subject.asobservable();
 }
}

上面的代码中，我们简单的实现了一个可观察的数据服务，下面我们来使用这个服务

import { component, oninit } from '@angular/core';

import { dataservice } from './shared/dataservice';

@component({
 moduleid: module.id,
 selector: '<my-component></my-component>',
 templateurl: '.name.component.html',
 providers: [dataservice]
})
export class mycomponent implements oninit {

 constructor(private dataservice: dataservice) {}

 ngoninit() {
 // will invoke data handler everytime
 // when other component use the setter this.dataservice.setdata()
 this.dataservice.getdata().subscribe(data => console.log(data));
 }
}

使用angular底层提供的 @input 和 @output 装饰器来实现组件间的通信服务

新的angular采用web component的方式进行组件的封装，并将组件间的组织关系设计称为树状结构。这为应用数据的流向，管理提供了良好的支持， 也使得我们可以在angular应用中使用一些别的库，比如： redux 思想。基于这些设计理念，angular为指令提供了更为强大的功能，组件也是指令。

采用 @input 修饰属性，实现 parent -> child 组件间的通信

下面的示例代码将展示如何设置一个组件的input属性

import { component, input, oninit } from '@angular/core';

@component({
 moduleid: module.id,
 selector: 'child-component',
 template: `i'm {{ name }}`
})
export class childcomponent implements oninit {

 @input() name: string;

 constructor() { }

 ngoninit() { }
}

上面的代码中，我们实现了一个名叫childcomponent的组件，这个组件的有一个采用@input装饰器修饰的属性：name。

下面我们将展示如何使用这个这个组件，并为这个input属性赋值。

import { component, oninit } from '@angular/core';
import { childcomponent } from './child-component';

@component({
 moduleid: module.id,
 selector: 'parent-component',
 template: `<child-component [name]="childname"></child-component>`,
 // this is unnecessary when installing childcomponent within root ngmodule
 directives: [childcomponent]
})
export class parentcomponent implements oninit {

 private childname: string;

 constructor() { }

 ngoninit() { 
 this.childname = 'stevenshen';
 }
}

上面的代码实现中，在父组件中，我们为子组件的input属性设置了父组件中的特定值。关键点在如下片段：

<child-component [name]="childname"></child-component>

angular在进行aot操作时，会将特定的值注入给childcomponent中。

如果你在codepen，或是自己的本地实验上面的代码你会发现，和angularjs的指令中采用'@', ‘=', ‘&'等修饰的属性不一样的地方。

当父组件中的childname发生变化时，childcomponent中的name属性并没有感知到变化。这是怎么了，是不是感觉新版的angular在 和我们开玩笑，wtf！！！内心的表情是这样的 ○|￣|＿ 。（感觉一篇学习笔记开始被写的画风突变了。。。）

将父组件的属性变化映射到子组件中

上一小节的实现，虽然在初始化子组件时，我们可以将父组件的值反馈到子组件中。但是，初始化完成后，父组件中相关属性的变化却不能被子组件感知。

这无疑是让我们内心崩溃的。为什么和angularjs不一样了？？？别急，下面我们将来提供解决方案。

利用angular提供的组件生命周期钩子函数ngonchanges来监听输入属性值的变化

需要实现让子组件感知到父组件中相关属性的变化，我们需要对angualr组件的生命周期有一定的了解，采用angular提供的组件生命周期的钩子函数， 进行组件间数据的同步。（关于angualr组件的生命周期，之后会有相关的学习笔记整理。到时候在加上链接。）这里直接上代码：

import { component, input, simplechanges } from '@angular/core';

@component({
 moduleid: module.id,
 selector: 'child-component',
 template: `i'm {{ name }}`
})
export class childcomponent {

 @input() name: string;

 ngonchanges(changes: simplechanges) {
 this.name = changes['childname'].currentvalue;
 }
}

采用es5中的getter和setter方法进行输入属性的监听

在es5中，我们在定义一个对象的属性时，可以通过object.defineproperty方法为一个对象的属性设置关联的getter和setter方法， 当我们进行这一操作后，以后该对象上的相关属性的读取和赋值操作，都会调用相应的getter／setter方法进行预处理或改变操作结果。

同样的道理，在angular中，我们通过设置和使用一个输入属性的setter方法，便可以拦截到父组件中相关值的变化，并进行特定的数据处理。

这种方法比较直观，直接上代码：

父组件的代码实现：

import { component } from '@angular/core';
@component({
 moduleid: module.id,
 selector: 'name-parent',
 template: `
 <h2>master controls {{names.length}} names</h2>
 <name-child *ngfor="let name of names" [name]="name"></name-child>
 `
})
export class parentcomponent {
 names = ['stevenshen', ' ', ' lei '];
}

子组件的代码实现

import { component, input } from '@angular/core';
@component({
 moduleid: module.id,
 selector: 'name-child',
 template: `<h3>"{{name}}"</h3>`
})
export class childcomponent {
 name: string = 'default name';

 @input()
 set name(name: string) {
 this.name = (name && name.trim()) || 'default name';
 }

 get name() { return this.name; }
}

采用 @output 修饰属性，实现 child -> parent 组件间的通信

新版的 angular 中，子组件和父组件间的通信，采用来事件的机制。这样的设计有助于组件的复用和代码的解耦;
我们不需要过多的关心组件的具体实现，我们只需要知道一个组件它接收哪些数据，并产生哪些输出事件即可。

直接上代码直观了解一下：

@component({
 moduleid: module.id,
 selector: 'child-component',
 template: `i'm {{ name }}`
})
export class childcomponent {

 @input() name: string;

 @output() say: eventemitter<boolean> = new eventemitter<boolean>();

 ngonchanges(changes: simplechange) {
 this.name = changes['childname'].currentvalue;
 }

 speak() {
 this.say.emit(true);
 }
}

子组件变更完成后，我们来变更父组件的代码实现。

import { component, oninit } from '@angular/core';
import { childcomponent } from './child-component';

@component({
 moduleid: module.id,
 selector: 'parent-component',
 template: `<child-component [name]="childname" (say)="ischildspeak($event)"></child-component>`,
 // this is unnecessary when installing childcomponent within root ngmodule
 directives: [childcomponent]
})
export class parentcomponent implements oninit {

 private childname: string;

 constructor() { }

 ngoninit() { 
 this.childname = 'stevenshen';
 }

 ischildspeak(isit: boolean) {
 console.log('the child speak status is %s', isit ? 'ture' : 'false');
 }
}

这样一来就实现了父子组件间的通信了。

但是这样的实现存在一定的局限性：父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法.

通过 @viewchild 获取组件的控制器／模版进行组件间的通信

除开使用 @input 和 @output 修饰器搭配angular的生命周期钩子函数进行组件间通信。 我们还可以采用@viewchild来进行不同组件间的通信，而不仅仅局限于父子组件间的通信。同时，采用@viewchild的方式， 我们可以获得更为精细的组件控制权限，比如在父组件中读取子组件的属性值或调用子组件的方法。我们依然采用上面的代码来进行改造。

对于childcomponent组件的变更：

import { component } from '@angular/core';

@component({
 moduleid: module.id,
 selector: 'child-component',
 template: `i'm {{ name }}`
})
export class childcomponent {
 public name: string;

 speak() {
 console.log('say something whitout eventemitter');
 }
}

对于parentcomponent组件的变更：

import { component, oninit, afterviewinit, viewchild, elementref } from '@angular/core';
import { childcomponent } from './child-component.ts';

@component({
 moduleid: module.id,
 selector: 'parent-component',
 // attention #childcmp tag
 template: `
 <child-component #childcmp></child-component>
 <button (click)="child.name = childname"></button>
 `,
 // this is unnecessary when installing childcomponent within root ngmodule
 directives: [ childcomponent ]
})

export class parentcomponent implements oninit, afterviewinit {

 @viewchild('childcmp') childcmp: elementref;


 constructor() { }

 ngoninit() { 
 this.childcmp.name = 'stevenshen';
 }

 ngafterviewinit() {
 this.childcmp.speak();
 }
}

通过上面的代码改造，我们同样可以实现不同组件间的通信，而且这样的组件通信已经不仅仅局限于父子组件间的通信了。

总结

由于技术水平和时间原因，这篇文章完成得比较粗略。主要整理的都是自己在工作中实际使用到的一些方案。

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