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(); }}通過上面的代碼改造，我們同樣可以實現不同組件間的通信，而且這樣的組件通信已經不僅僅局限于父子組件間的通信了。
總結
由于技術水平和時間原因，這篇文章完成得比較粗略。主要整理的都是自己在工作中實際使用到的一些方案。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
