組件通信

2018-06-06 10:46 更新

本文介紹的內(nèi)容是組件通信的常用方式：@Input、@Output、@ViewChild、模板變量、MessageService、Broadcaster (Angular 1.x $rootScope 中 $on、$broadcast ) 和 Pub - Sub 模式、RxJS Subject 存在的問題。

輸入屬性 (父組件 -> 子組件)

counter.component.ts

  1. import { Component, Input } from '@angular/core';
  4. @Component({
  5.     selector: 'exe-counter',
  6.     template: `
  7.       <p>當(dāng)前值: {{ count }}</p>
  8.       <button (click)="increment()"> + </button>
  9.       <button (click)="decrement()"> - </button>
  10.     `
  11. })
  12. export class CounterComponent {
  13.     @Input() count: number = 0;
  16.     increment() {
  17.         this.count++;
  18.     }
  21.     decrement() {
  22.         this.count--;
  23.     }
  24. }

app.component.ts

  1. import { Component } from '@angular/core';
  4. @Component({
  5.   selector: 'exe-app',
  6.   template: `
  7.    <exe-counter [count]="initialCount"></exe-counter>
  8.   `
  9. })
  10. export class AppComponent {
  11.   initialCount: number = 5;
  12. }

輸出屬性 (子組件 -> 父組件)

counter.component.ts

  1. import { Component, Input, Output, EventEmitter } from '@angular/core';
  4. @Component({
  5.     selector: 'exe-counter',
  6.     template: `
  7.       <p>當(dāng)前值: {{ count }}</p>
  8.       <button (click)="increment()"> + </button>
  9.       <button (click)="decrement()"> - </button>
  10.     `
  11. })
  12. export class CounterComponent {
  13.     @Input() count: number = 0;
  16.     @Output() change: EventEmitter<number> = new EventEmitter<number>();
  19.     increment() {
  20.         this.count++;
  21.         this.change.emit(this.count);
  22.     }
  25.     decrement() {
  26.         this.count--;
  27.         this.change.emit(this.count);
  28.     }
  29. }

app.component.ts

  1. import { Component } from '@angular/core';
  4. @Component({
  5.   selector: 'exe-app',
  6.   template: `
  7.    <p>{{changeMsg}}</p> 
  8.    <exe-counter [count]="initialCount" 
  9.     (change)="countChange($event)"></exe-counter>
  10.   `
  11. })
  12. export class AppComponent {
  13.   initialCount: number = 5;
  16.   changeMsg: string;
  19.   countChange(event: number) {
  20.     this.changeMsg = `子組件change事件已觸發(fā)，當(dāng)前值是: ${event}`;
  21.   }
  22. }

模板變量

child.component.ts

  1. import {Component} from '@angular/core';
  4. @Component({
  5.   selector: 'child-component',
  6.   template: `I'm {{ name }}`
  7. })
  10. export class ChildComponent {
  11.   public name: string;
  12. }

parent.component.ts

  1. import {Component, OnInit} from '@angular/core';
  2. import {ChildComponent} from './child-component.ts';
  5. @Component({
  6.   selector: 'parent-component',
  7.   template: `
  8.     <child-component #child></child-component>
  9.     <button (click)="child.name = childName">設(shè)置子組件名稱</button>
  10.   `
  11. })
  14. export class ParentComponent implements OnInit {
  16.   
  17.   private childName: string;
  19.   
  20.   constructor() { }
  23.   ngOnInit() { 
  24.     this.childName = 'child-component';
  25.   }
  26. }

@ViewChild 裝飾器

child.component.ts

  1. import { Component, OnInit } from '@angular/core';
  4. @Component({
  5.     selector: 'exe-child',
  6.     template: `
  7.       <p>Child Component</p>  
  8.     `
  9. })
  10. export class ChildComponent {
  11.     name: string = '';
  12. }

app.component.ts

  1. import { Component, ViewChild, AfterViewInit } from '@angular/core';
  2. import { ChildComponent } from './child.component';
  5. @Component({
  6.   selector: 'my-app',
  7.   template: `
  8.     <h4>Welcome to Angular World</h4>
  9.     <exe-child></exe-child>
  10.   `,
  11. })
  12. export class AppComponent {
  15.   @ViewChild(ChildComponent)
  16.   childCmp: ChildComponent;
  19.   ngAfterViewInit() {
  20.     this.childCmp.name = 'child-component';
  21.   }
  22. }

使用 MessageService - 基于 RxJS Subject

message.service.ts

  1. import { Injectable } from '@angular/core';
  2. import {Observable} from 'rxjs/Observable';
  3. import { Subject } from 'rxjs/Subject';
  6. @Injectable()
  7. export class MessageService {
  8.     private subject = new Subject<any>();
  11.     sendMessage(message: string) {
  12.         this.subject.next({ text: message });
  13.     }
  16.     clearMessage() {
  17.         this.subject.next();
  18.     }
  21.     getMessage(): Observable<any> {
  22.         return this.subject.asObservable();
  23.     }
  24. }

home.component.ts

  1. import { Component } from '@angular/core';
  2. import { MessageService } from './message.service';
  5. @Component({
  6.     selector: 'exe-home',
  7.     template: `
  8.     <div>
  9.         <h1>Home</h1>
  10.         <button (click)="sendMessage()">Send Message</button>
  11.         <button (click)="clearMessage()">Clear Message</button>
  12.     </div>`
  13. })
  16. export class HomeComponent {
  17.     constructor(private messageService: MessageService) {}
  19.     
  20.     sendMessage(): void {
  21.         this.messageService.sendMessage('Message from Home Component to App Component!');
  22.     }
  25.     clearMessage(): void {
  26.         this.messageService.clearMessage();
  27.     }
  28. }

app.component.ts

  1. import { Component, OnDestroy } from '@angular/core';
  2. import { Subscription } from 'rxjs/Subscription';
  3. import { MessageService } from './message.service';
  6. @Component({
  7.     selector: 'my-app',
  8.     template: `
  9.     <div>
  10.        <div *ngIf="message">{{message.text}}</div>
  11.        <exe-home></exe-home>
  12.     </div>
  13.     `
  14. })
  17. export class AppComponent implements OnDestroy {
  18.     message: any;
  19.     subscription: Subscription;
  22.     constructor(private messageService: MessageService) {
  23.         this.subscription = this.messageService
  24.                                 .getMessage().subscribe( message => { 
  25.                                     this.message = message; 
  26.                                  });
  27.     }
  30.     ngOnDestroy() {
  31.         this.subscription.unsubscribe();
  32.     }
  33. }

使用 Broadcaster - 基于 RxJS Subject

實(shí)現(xiàn) Angular 1.x 中的 $rootScope 對(duì)象中 $on 和 $broadcast 的功能。

broadcaster.ts

  1. import { Injectable } from '@angular/core';
  2. import {Subject} from 'rxjs/Subject';
  3. import {Observable} from 'rxjs/Observable';
  4. import 'rxjs/add/operator/filter';
  5. import 'rxjs/add/operator/map';
  8. interface BroadcastEvent {
  9.   key: any;
  10.   data?: any;
  11. }
  14. @Injectable()
  15. export class Broadcaster {
  16.   private _eventBus: Subject<BroadcastEvent>;
  19.   constructor() {
  20.     this._eventBus = new Subject<BroadcastEvent>();
  21.   }
  24.   broadcast(key: any, data?: any) {
  25.     this._eventBus.next({key, data});
  26.   }
  29.   on<T>(key: any): Observable<T> {
  30.     return this._eventBus.asObservable()
  31.       .filter(event => event.key === key)
  32.       .map(event => <T>event.data);
  33.   }
  34. }

child.component.ts

  1. import { Component } from '@angular/core';
  4. @Component({
  5.     selector: 'child'
  6. })
  7. export class ChildComponent {
  8.   constructor(private broadcaster: Broadcaster) {}
  10.   
  11.   registerStringBroadcast() {
  12.     this.broadcaster.on<string>('MyEvent')
  13.       .subscribe(message => {
  14.         ...
  15.       });
  16.   }
  19.   emitStringBroadcast() {
  20.     this.broadcaster.broadcast('MyEvent', 'some message');
  21.   }
  22. }

本文主要是介紹組件通訊的思路，提供的都是相對(duì)簡單的示例。如果想深入了解，請(qǐng)參考 - angular.cn - component-communication。

我有話說

1.在實(shí)際開發(fā)中，我們也經(jīng)常使用 Pub (發(fā)布) - Sub (訂閱模式) 來實(shí)現(xiàn)模塊之間的消息通訊。接下來我們看一下 Pub - Sub 的核心點(diǎn)：

  • 至少包含 subscribe() 和 publish() 兩個(gè)方法，subscribe() 用于實(shí)現(xiàn)消息訂閱，publish() 方法用于發(fā)布消息。
  • 支持訂閱不同的消息類型，且對(duì)于任何一種消息類型都可以添加多個(gè)觀察者。內(nèi)部實(shí)現(xiàn)一般使用 key-value 結(jié)構(gòu)進(jìn)行消息類型和觀察者列表的存儲(chǔ)。
  • 訂閱觀察者后，最好返回一個(gè)對(duì)象或函數(shù)對(duì)象，用于取消訂閱。

具體示例如下(詳細(xì)信息，請(qǐng)參考 - [Pub/Sub JavaScript Object](Pub/Sub JavaScript Object))：

  1. var events = (function(){
  2.   var topics = {};
  3.   var hOP = topics.hasOwnProperty;
  6.   return {
  7.     subscribe: function(topic, listener) {
  8.       // 如果topic類型不存在，則創(chuàng)建
  9.       if(!hOP.call(topics, topic)) topics[topic] = [];
  11.       
  12.       // 添加listener
  13.       var index = topics[topic].push(listener) -1;
  16.       // 返回對(duì)象用于移除listener
  17.       return {
  18.         remove: function() {
  19.           delete topics[topic][index];
  20.         }
  21.       };
  22.     },
  23.     publish: function(topic, info) {
  24.       if(!hOP.call(topics, topic)) return;
  27.       topics[topic].forEach(function(item) {
  28.             item(info != undefined ? info : {});
  29.       });
  30.     }
  31.   };
  32. })();

使用示例：

  1. var subscription = events.subscribe('/page/load', function(obj) {
  2.     // 事件處理
  3. });
  6. events.publish('/page/load', {
  7.     url: '/some/url/path' 
  8. });

2.RxJS Subject 在使用中存在一個(gè)問題，就是如果某個(gè) observer (觀察者) 在執(zhí)行的時(shí)候出現(xiàn)異常，卻沒有進(jìn)行異常處理，那么就會(huì)影響到其它的觀察者。解決該問題，最簡單的方式就是為所有的觀察者添加異常處理。具體問題如下：

  1. const source = Rx.Observable.interval(1000);
  2. const subject = new Rx.Subject();
  5. const example = subject.map(x => {
  6.     if (x === 1) {
  7.         throw new Error('oops');
  8.     }
  9.     return x;
  10. });
  11. subject.subscribe(x => console.log('A', x));
  12. example.subscribe(x => console.log('B', x));
  13. subject.subscribe(x => console.log('C', x));
  16. source.subscribe(subject);

以上代碼運(yùn)行后，控制臺(tái)的輸出結(jié)果：

  1. A 0
  2. B 0
  3. C 0
  4. A 1
  5. Rx.min.js:74 Uncaught Error: oops

解決方案：

  1. const source = Rx.Observable.interval(1000);
  2. const subject = new Rx.Subject();
  5. const example = subject.map(x => {
  6.     if (x === 1) {
  7.         throw new Error('oops');
  8.     }
  9.     return x;
  10. });
  13. subject.subscribe(
  14.     x => console.log('A', x),
  15.     error => console.log('A Error:' + error)
  16. );
  18.     
  19. example.subscribe(
  20.     x => console.log('B', x),
  21.     error => console.log('B Error:' + error)
  22. );
  25. subject.subscribe(
  26.     x => console.log('C', x),
  27.     error => console.log('C Error:' + error)
  28. );
  31. source.subscribe(subject);

關(guān)于 RxJS Subject 的詳細(xì)信息，請(qǐng)查看 - RxJS Subject。

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)