組件化是angular的核心概念，所以組件通信的使用就比較多而且很重要。
官方傳送門：
https://angular.io/guide/component-interaction
https://angular.cn/guide/component-interaction
相關(guān)教程推薦：《angular教程》
父子組件通信
關(guān)鍵詞 input output eventemitter viewchild
1、父組件 向 子組件 傳遞數(shù)據(jù)
【input】
綁定屬性的方式
父組件：
<!-- parentcomponent --><app-child [name]="'childname'"></app-child>子組件：
// 子組件需要使用input接收
<span>{{name}}</span>@input() public name:string = '';2、子組件 向 父組件 傳遞數(shù)據(jù)
【output eventemitter】
子組件：
@output()public readonly childemit: eventemitter<t> = new eventemitter<t>();this.childemit.emit(data);父組件：
<app-child (childemit)="getdata($event)"></app-child>public getdata(data:t): void { }3、viewchild 方法
因?yàn)槲矣X得這個(gè)方法既可以讓父組件獲取子組件的數(shù)據(jù)，又可以讓父組件給子組件設(shè)置變量值等，所以我這里單獨(dú)分了出來(lái)。
父組件：
<app-child #child></app-child><button (click)="child.print('---')">點(diǎn)擊</button>@viewchild('child', { static: true })public child!: elementref<htmlelement>;public print():void{ if(this.child){ // 這里得到child，可以使用child中的所有的public屬性方法 this.child.print('hello2'); }}【示例】
// 父組件import { component } from '@angular/core';@component({ selector: 'app-parent', template: ` <app-child #child [name]="name" (childemit)="childclick($event)"></app-child> <button (click)="child.print('hello1')">調(diào)用子組件的方法1</button> <button (click)="print()">調(diào)用子組件的方法2</button> `})export class parentcomponent { public name:string = '大兒子'; @viewchild('child', { static: true }) public child!: elementref<htmlelement>; public childclick(bool:boolean):void{ // todo } public print():void{ if(this.child){ this.child.print('hello2'); } }}/*/// 子組件import { component, input, output, eventemitter } from '@angular/core';@component({ selector: 'app-child', template: ` <h3 (click)="myclick()">{{name}}</h3> `})export class herochildcomponent { @input() public name: string; @output() public readonly childemit: eventemitter<boolean> = new eventemitter<boolean>(); public myclick():void{ this.childemit.emit(true); } public print(content:string):void{ console.log(content); }}非父子組件通信
1、service
單例模式，其實(shí)就是一個(gè)變量，需要雙向觸發(fā)（發(fā)送信息 / 接收信息），及設(shè)置和獲取數(shù)據(jù)都需要組件自己去處理。
service.ts
import { component, injectable, eventemitter } from '@angular/core';@injectable()export class myservice { public info: string = '';}組件 1 向 service 傳遞信息
import { service1 } from '../../service/service1.service';...public constructor( public service: service1,) { }public changeinfo():void { this.service.info = this.service.info '1234';}...組件 2 從 service 獲取信息
import { service2 } from '../../service/service2.service';...public constructor( public service: service2,) { }public showinfo() { console.log(this.service.info);}...2、subject（發(fā)布訂閱）
真正的發(fā)布訂閱模式，當(dāng)數(shù)據(jù)改變時(shí)，訂閱者也能得到響應(yīng),這里只舉了behaviorsubject的例子
// serviceimport { behaviorsubject } from 'rxjs';...public messagesource = new behaviorsubject<string>('start');public changemessage(message: string): void { this.messagesource.next(message);}public getmessagesource(): observable<string> { return this.messagesource.asobservable();}/////////////////////////// 發(fā)布...this.messageservice.changemessage('message change');/////////////////////////public // 訂閱 (記得根據(jù)需要選擇是否取消訂閱 unsubscribe)this.messageservice.getmessagesource().subscribe(m => { console.log(m);})四種主題subject對(duì)比
rxjs subject是否存儲(chǔ)數(shù)據(jù)是否需要初始值何時(shí)向訂閱者發(fā)布數(shù)據(jù)subject否否及時(shí)發(fā)布。有新數(shù)據(jù)就發(fā)布behaviorsubject是。存儲(chǔ)最后一條數(shù)據(jù)或者初始值是及時(shí)發(fā)布。有新數(shù)據(jù)就發(fā)布replaysubject是。存儲(chǔ)所有數(shù)據(jù)否及時(shí)發(fā)布。有新數(shù)據(jù)就發(fā)布asyncsubject是。存儲(chǔ)最后一條數(shù)據(jù)是延時(shí)發(fā)布。只有當(dāng)數(shù)據(jù)源complete的時(shí)候才會(huì)發(fā)布其他通信方式
路由傳值、瀏覽器本地存儲(chǔ)（localst