本篇文章帶大家了解一下Angular中的組件通信，介紹一下父子組件間通信、無(wú)直接關(guān)系組件間通信的方法。

在實(shí)際的應(yīng)用中我們的組件將會(huì)以樹(shù)形的結(jié)構(gòu)進(jìn)行關(guān)聯(lián),所以組件間的關(guān)系主要就是:

• 父子關(guān)系

• 兄弟關(guān)系

• 無(wú)直接關(guān)系

【相關(guān)教程推薦：《angular教程》】

準(zhǔn)備一下我們的環(huán)境:

1、創(chuàng)建一個(gè)header組件: ng g c components/header

<app-button></app-button> <app-title></app-title> <app-button></app-button>

export class HeaderComponent implements OnInit {    constructor() {}    ngOnInit(): void {} }

2、創(chuàng)建一個(gè)title組件: ng g c components/title

<span>{{title}}</span>

export class TitleComponent implements OnInit {    public title: string = '標(biāo)題';    constructor() {}    ngOnInit(): void {} }

3、創(chuàng)建一個(gè)button組件: ng g c components/button

<button>{{ btnName }}</button>

export class ButtonComponent implements OnInit {   public btnName: string = '按鈕';    constructor() {}    ngOnInit(): void {} }

直接調(diào)用

適用于父子關(guān)系組件,注意點(diǎn)是直接調(diào)用使得父子組件的耦合性變高,要明確使用確實(shí)需要直接調(diào)用。

1、將我們的header組件掛載到app中,使得app和header之間形成父子組件關(guān)系

2、使用#為我們的組件起一個(gè)名稱: <app-header #header></app-header>

3、現(xiàn)在我們的header組件還很空,我們擴(kuò)展一下,要不然調(diào)用什么呢?

export class HeaderComponent implements OnInit {   public name: string = 'HeaderComponent';    printName(): void {     console.log('component name is', this.name);   } }

4、組件擴(kuò)展好以后我們就可以在父組件app中調(diào)用子組件header中的屬性和函數(shù)了

<app-header #header></app-header> <p>   調(diào)用子組件屬性: {{ header.name }}   <button (click)="header.printName()">調(diào)用子組件函數(shù)</button> </p>

5、第4步是在父組件的html模板中進(jìn)行操作,有時(shí)候我們還需要在父組件的ts類中對(duì)子組件進(jìn)行操作,我們接下來(lái)接著演示。

6、我們需要用到一個(gè)新的裝飾器@ViewChild(Component)

export class AppComponent {   title = 'angular-course';    @ViewChild(HeaderComponent)   private header!: HeaderComponent;  	// 聲明周期鉤子: 組件及子組件視圖更新后調(diào)用,執(zhí)行一次   ngAfterViewInit(): void {     // 調(diào)用子組件屬性     console.log(this.header.name);     // 調(diào)用子組件函數(shù)     this.header.printName();   } }

@Input和@Output

適用于父子關(guān)系組件

1、我們通過(guò)在header組件中定義title,來(lái)解耦title組件中直接調(diào)用導(dǎo)致擴(kuò)展復(fù)雜的問(wèn)題

2、為title組件中的title屬性增加@Input()裝飾器: @Input() public title: string = '標(biāo)題';

3、為header組件新增title屬性并賦值: public title: string = '我是新標(biāo)題';

4、我們?cè)?code>header組件的html模板中這樣來(lái)使用title組件: <app-title [title]="title"></app-title>

5、一起看看到現(xiàn)在的效果吧,界面雖然丑,但是下次使用組件時(shí)title設(shè)置是不是方便一點(diǎn)呢?

6、以上步驟實(shí)現(xiàn)了父組件的數(shù)據(jù)傳遞到了子組件中,那么我們接著來(lái)看子組件的數(shù)據(jù)怎么傳遞到父組件中呢? 我們一起來(lái)用@Output()裝飾器實(shí)現(xiàn)以下吧

7、在title組件的ts類中增加titleChange屬性: @Output() public titleChange = new EventEmitter();

8、在title組件的ts類中定時(shí)派發(fā)數(shù)據(jù)

ngOnInit(): void {   // 定時(shí)將子組件的數(shù)據(jù)進(jìn)行派發(fā)   setInterval(() => {   	this.titleChange.emit(this.title); 	}, 1500); }

9、現(xiàn)在我們來(lái)修改header父組件來(lái)接收派發(fā)來(lái)的數(shù)據(jù):

<app-title  	[title]="title"    (titleChange)="onChildTitleChange($event)"> </app-title>

onChildTitleChange(value: any) { 	console.log('onChildTitleChange: >>', value); }

利用服務(wù)單利進(jìn)行通信

適用于無(wú)直接關(guān)系組件

1、既然要通過(guò)服務(wù)來(lái)做通信,那我們就先創(chuàng)建一個(gè)服務(wù)吧: ng g s services/EventBus,并且我們聲明了一個(gè)類型為Subject的屬性來(lái)輔助通信

@Injectable({   providedIn: 'root', }) export class EventBusService {   public eventBus: Subject<any> = new Subject();    constructor() {} }

2、我們?yōu)榱耸∈戮筒恢匦聞?chuàng)建組件了,因?yàn)槲覀兊?code>header中的按鈕組件和title組件就符合沒(méi)有直接關(guān)系的組件。

3、改造一下我們的button組件,并且添加點(diǎn)擊事件來(lái)觸發(fā)triggerEventBus函數(shù)

export class ButtonComponent implements OnInit {   public btnName: string = '按鈕';    constructor(public eventBusService: EventBusService) {}    ngOnInit(): void {}    public triggerEventBus(): void {     this.eventBusService.eventBus.next('我是按鈕組件');   } }

4、在title組件中模擬數(shù)據(jù)的獲取

export class TitleComponent implements OnInit {    constructor(public eventBusService: EventBusService) {}    ngOnInit(): void {     this.eventBusService.eventBus.subscribe((value) => {       console.log(value);     });   } }

利用cookie、session或者localstorage進(jìn)行通信

1、這個(gè)就很簡(jiǎn)單了,我們還是用title組件和button組件來(lái)做演示,這次我們?cè)趖itle組件中將數(shù)據(jù)保存,在button組件中獲取數(shù)據(jù)。我們僅演示localstorage吧,其他都雷同的。

2、在title組件的ngOnInit()鉤子中保存title到localstorage中: window.localStorage.setItem('title', this.title);

3、在button組件中獲取數(shù)據(jù): const title = window.localStorage.getItem('title');

結(jié)語(yǔ)：

本篇我們介紹了Angular的組件通信，為我們拆分后的組件可以進(jìn)行合理的通信提供了保障，我們到現(xiàn)在組件的使用都是通過(guò)引入標(biāo)簽的方式進(jìn)行。