組件A
???????/??????\
?????組件B??????組件C
????/???\??????/????\
??組件D?組件E?組件F??組件G

//?message.service.ts
import?{?Injectable?}?from?'@angular/core';
import?{?Subject?}?from?'rxjs';
@Injectable({
??providedIn:?'root',
})
export?class?MessageService?{
??private?messageSubject?=?new?Subject<string>();
??//?Observable?string?stream
??message$?=?this.messageSubject.asObservable();
??//?Service?method?to?send?a?message
??sendMessage(message:?string)?{
????this.messageSubject.next(message);
??}
}

//?sender.component.ts
import?{?Component?}?from?'@angular/core';
import?{?MessageService?}?from?'./message.service';
@Component({
??selector:?'app-sender',
??template:?`
????<input?type="text"?[(ngModel)]="message"?/>
????<button?(click)="sendMessage()">發(fā)送消息</button>
??`,
})
export?class?SenderComponent?{
??message:?string;
??constructor(private?messageService:?MessageService)?{}
??sendMessage()?{
????this.messageService.sendMessage(this.message);
????this.message?=?'';?//?清空輸入框
??}
}

//?receiver.component.ts
import?{?Component?}?from?'@angular/core';
import?{?MessageService?}?from?'./message.service';
@Component({
??selector:?'app-receiver',
??template:?`?<div>接收到的消息:?{{?receivedMessage?}}</div>?`,
})
export?class?ReceiverComponent?{
??receivedMessage:?string;
??constructor(private?messageService:?MessageService)?{
????this.messageService.message$.subscribe(message?=>?{
??????this.receivedMessage?=?message;
????});
??}
}

//?dataService.service.ts
import?{?Injectable?}?from?'@angular/core';
import?{?Subject,?Subscription?}?from?'rxjs';
@Injectable({
??providedIn:?'root',
})
export?class?DataService<T>?{
??//?創(chuàng)建注冊(cè)表，用于存放監(jiān)聽器
??private?events?=?new?Map();
??/**
???*?發(fā)送消息
???*
???*?@param?{string}?event?事件。用于區(qū)別不同的監(jiān)聽
???*?@param?{T}?value?消息內(nèi)容
???*?@returns?{void}
???*?@memberof?DataService
???*/
??sendMessage(event:?string,?value:?T):?void?{
????if?(!this.events.has(event))?{
??????return;
????}
????this.events.get(event).subject.next(value);
??}
??/**
???*?獲取監(jiān)聽器
???*
???*?監(jiān)聽器其實(shí)就是一個(gè)rxjs?Subject對(duì)象，通過訂閱來獲取數(shù)據(jù)。
???*
???*?注意：
???*?1.getListener()應(yīng)該在sendMessage()之前，否則sendMessage()中獲取不到監(jiān)聽器，無法發(fā)消息
???*?2.getListener()應(yīng)放在ngOnInit()、ngAfterViewInit()等只會(huì)執(zhí)行一次的生命周期函數(shù)中
???*
???*?@param?{string}?event?事件。用于區(qū)別不同的監(jiān)聽
???*?@returns?{Subject<T>}
???*?@memberof?DataService
???*/
??getListener(event:?string):?Subject<T>?{
????//?多處監(jiān)聽時(shí)會(huì)走到此分支
????if?(this.events.has(event))?{
??????const?current?=?this.events.get(event);
??????current.count++;
??????return?current.subject;
????}
????const?listener?=?{
??????count:?1,?//?該字段用于記錄監(jiān)聽（訂閱）者個(gè)數(shù)
??????subject:?new?Subject<T>(),
????};
????/**
?????*?創(chuàng)建監(jiān)聽器，并將其加入注冊(cè)表
?????*
?????*?所在函數(shù)在創(chuàng)建監(jiān)聽（訂閱）時(shí)調(diào)用，監(jiān)聽發(fā)生在發(fā)送消息之前，所以在監(jiān)聽這里將監(jiān)聽器加入注冊(cè)表
?????*/
????this.events.set(event,?listener);
????return?listener.subject;
??}
??/**
???*?取消訂閱
???*
???*?必須手動(dòng)取消訂閱。
???*?取消時(shí)檢查監(jiān)聽者個(gè)數(shù)。如果沒有監(jiān)聽者了，就移除監(jiān)聽器。
???*
???*?@param?{string}?event
???*?@param?{Subscription}?subscription
???*?@returns
???*?@memberof?DataService
???*/
??cancelSubscription(event:?string,?subscription:?Subscription)?{
????if?(!this.events.has(event))?{
??????return;
????}
????const?current?=?this.events.get(event);
????current.count--;
????if?(current.count?===?0)?{
??????//?沒有監(jiān)聽者了，就移除監(jiān)聽器
??????this.events.delete(event);
????}
????subscription.unsubscribe();
??}
}

//?接收傳遞過來的消息
??receiveChangeMessage;
??ngOnInit()?{
????...
????this.subscription?=?this.dataService.getListener('event_name').subscribe(message?=>?{
????????this.receiveChangeMessage?=?message;
??????});
????...
??}
??ngOnDestroy()?{
????this.dataService.cancelSubscription('event_name',?this.subscription);
??}

public?onSomethingChange(value:?boolean):?void?{

????...

????this.dataService.sendMessage('event_name',?value);
??}

//?sender.component.ts
import?{?Component?}?from?'@angular/core';
import?{?DataService?}?from?'./data.service';
@Component({
??selector:?'app-sender',
??template:?`
????<input?type="text"?[(ngModel)]="message"?/>
????<button?(click)="sendMessage()">發(fā)送消息</button>
??`,
})
export?class?SenderComponent?{
??message:?string;
??constructor(private?dataService:?DataService<string>)?{}
??sendMessage()?{
????this.dataService.sendMessage('customEvent',?this.message);
????this.message?=?'';?//?清空輸入框
??}
}

//?receiver.component.ts
import?{?Component,?OnInit,?OnDestroy?}?from?'@angular/core';
import?{?DataService?}?from?'./data.service';
import?{?Subscription?}?from?'rxjs';
@Component({
??selector:?'app-receiver',
??template:?`?<div>接收到的消息:?{{?receivedMessage?}}</div>?`,
})
export?class?ReceiverComponent?implements?OnInit,?OnDestroy?{
??receivedMessage:?string;
??subscription:?Subscription;
??constructor(private?dataService:?DataService<string>)?{}
??ngOnInit()?{
????this.subscription?=?this.dataService.getListener('customEvent').subscribe(message?=>?{
??????this.receivedMessage?=?message;
????});
??}
??ngOnDestroy()?{
????this.dataService.cancelSubscription('customEvent',?this.subscription);
??}
}

export?class?ReceiveComponent?{
??@listen('messageEvent')
??message;
}

export?class?SendComponent?{
??@send('messageEvent')
??message;
}