站長(zhǎng)資訊網(wǎng)Angular組件間怎么通信？下面本篇文章帶大家了解一下Angular中組件通信的方法，希望對(duì)大家有所幫助！
上一篇，我們講了 Angular 結(jié)合 NG-ZORRO 快速開(kāi)發(fā)。前端開(kāi)發(fā)，很大程度上是組件化開(kāi)發(fā)，永遠(yuǎn)離不開(kāi)組件之間的通信。那么，在 Angular 開(kāi)發(fā)中，其組件之間的通信是怎么樣的呢？【相關(guān)教程推薦：《angular教程》】
舉一反三，
Vue和React中大同小異
本文純文字，比較枯燥。因?yàn)榭刂婆_(tái)打印的東西比較雞肋，所以就不配圖了，嗯～希望讀者跟著說(shuō)明代碼走一遍更容易吸收～
1. 父組件通過(guò)屬性傳遞值給子組件
相當(dāng)于你自定義了一個(gè)屬性，通過(guò)組件的引入，將值傳遞給子組件。Show you the CODE。
<!-- parent.component.html --> <app-child [parentProp]="'My kid.'"></app-child>
在父組件中調(diào)用子組件，這里命名一個(gè) parentProp 的屬性。
// child.component.ts import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.scss'] }) export class ChildComponent implements OnInit { // 輸入裝飾器 @Input() parentProp!: string; constructor() { } ngOnInit(): void { } }
子組件接受父組件傳入的變量 parentProp，回填到頁(yè)面。
<!-- child.component.html --> <h1>Hello! {{ parentProp }}</h1>
2. 子組件通過(guò) Emitter 事件傳遞信息給父組件
通過(guò) new EventEmitter() 將子組件的數(shù)據(jù)傳遞給父組件。
// child.component.ts import { Component, OnInit, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.scss'] }) export class ChildComponent implements OnInit { // 輸出裝飾器 @Output() private childSayHi = new EventEmitter() constructor() { } ngOnInit(): void { this.childSayHi.emit('My parents'); } }
通過(guò) emit 通知父組件，父組件對(duì)事件進(jìn)行監(jiān)聽(tīng)。
// parent.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-communicate', templateUrl: './communicate.component.html', styleUrls: ['./communicate.component.scss'] }) export class CommunicateComponent implements OnInit { public msg:string = '' constructor() { } ngOnInit(): void { } fromChild(data: string) { // 這里使用異步 setTimeout(() => { this.msg = data }, 50) } }
在父組件中，我們對(duì) child 組件來(lái)的數(shù)據(jù)進(jìn)行監(jiān)聽(tīng)后，這里采用了 setTimeout 的異步操作。是因?yàn)槲覀冊(cè)谧咏M件中初始化后就進(jìn)行了 emit，這里的異步操作是防止 Race Condition 競(jìng)爭(zhēng)出錯(cuò)。
我們還得在組件中添加 fromChild 這個(gè)方法，如下：
<!-- parent.component.html --> <h1>Hello! {{ msg }}</h1> <app-child (childSayHi)="fromChild($event)"></app-child>
3. 通過(guò)引用，父組件獲取子組件的屬性和方法
我們通過(guò)操縱引用的方式，獲取子組件對(duì)象，然后對(duì)其屬性和方法進(jìn)行訪問(wèn)。
我們先設(shè)置子組件的演示內(nèi)容：
// child.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.scss'] }) export class ChildComponent implements OnInit { // 子組件的屬性 public childMsg:string = 'Prop: message from child' constructor() { } ngOnInit(): void { } // 子組件方法 public childSayHi(): void { console.log('Method: I am your child.') } }
我們?cè)诟附M件上設(shè)置子組件的引用標(biāo)識(shí) #childComponent：
<!-- parent.component.html --> <app-child #childComponent></app-child>
之后在 javascript 文件上調(diào)用：
import { Component, OnInit, ViewChild } from '@angular/core'; import { ChildComponent } from './components/child/child.component'; @Component({ selector: 'app-communicate', templateUrl: './communicate.component.html', styleUrls: ['./communicate.component.scss'] }) export class CommunicateComponent implements OnInit { @ViewChild('childComponent') childComponent!: ChildComponent; constructor() { } ngOnInit(): void { this.getChildPropAndMethod() } getChildPropAndMethod(): void { setTimeout(() => { console.log(this.childComponent.childMsg); // Prop: message from child this.childComponent.childSayHi(); // Method: I am your child. }, 50) } }
這種方法有個(gè)限制?，就是子屬性的修飾符需要是 public，當(dāng)是 protected 或者 private 的時(shí)候，會(huì)報(bào)錯(cuò)。你可以將子組件的修飾符更改下嘗試。報(bào)錯(cuò)的原因如下：
| 類型 | 使用范圍 |
|---|---|
| public | 允許在累的內(nèi)外被調(diào)用，作用范圍最廣 |
| protected | 允許在類內(nèi)以及繼承的子類中使用，作用范圍適中 |
| private | 允許在類內(nèi)部中使用，作用范圍最窄 |
4. 通過(guò) service 去變動(dòng)
我們結(jié)合 rxjs 來(lái)演示。
rxjs 是使用 Observables 的響應(yīng)式編程的庫(kù)，它使編寫(xiě)異步或基于回調(diào)的代碼更容易。
后期會(huì)有一篇文章記錄
rxjs，敬請(qǐng)期待
我們先來(lái)創(chuàng)建一個(gè)名為 parent-and-child 的服務(wù)。
// parent-and-child.service.ts import { Injectable } from '@angular/core'; import { BehaviorSubject, Observable } from 'rxjs'; // BehaviorSubject 有實(shí)時(shí)的作用，獲取最新值 @Injectable({ providedIn: 'root' }) export class ParentAndChildService { private subject$: BehaviorSubject<any> = new BehaviorSubject(null) constructor() { } // 將其變成可觀察 getMessage(): Observable<any> { return this.subject$.asObservable() } setMessage(msg: string) { this.subject$.next(msg); } }
接著，我們?cè)诟缸咏M件中引用，它們的信息是共享的。
// parent.component.ts import { Component, OnDestroy, OnInit } from '@angular/core'; // 引入服務(wù) import { ParentAndChildService } from 'src/app/services/parent-and-child.service'; import { Subject } from 'rxjs' import { takeUntil } from 'rxjs/operators' @Component({ selector: 'app-communicate', templateUrl: './communicate.component.html', styleUrls: ['./communicate.component.scss'] }) export class CommunicateComponent implements OnInit, OnDestroy { unsubscribe$: Subject<boolean> = new Subject(); constructor( private readonly parentAndChildService: ParentAndChildService ) { } ngOnInit(): void { this.parentAndChildService.getMessage() .pipe( takeUntil(this.unsubscribe$) ) .subscribe({ next: (msg: any) => { console.log('Parent: ' + msg); // 剛進(jìn)來(lái)打印 Parent: null // 一秒后打印 Parent: Jimmy } }); setTimeout(() => { this.parentAndChildService.setMessage('Jimmy'); }, 1000) } ngOnDestroy() { // 取消訂閱 this.unsubscribe$.next(true); this.unsubscribe$.complete(); } }
import { Component, OnInit } from '@angular/core'; import { ParentAndChildService } from 'src/app/services/parent-and-child.service'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.scss'] }) export class ChildComponent implements OnInit { constructor( private parentAndChildService: ParentAndChildService ) { } // 為了更好理解，這里我移除了父組件的 Subject ngOnInit(): void { this.parentAndChildService.getMessage() .subscribe({ next: (msg: any) => { console.log('Child: '+msg); // 剛進(jìn)來(lái)打印 Child: null // 一秒后打印 Child: Jimmy } }) } }
在父組件中，我們一秒鐘之后更改值。所以在父子組件中，一進(jìn)來(lái)就會(huì)打印 msg 的初始值 null，然后過(guò)了一秒鐘之后，就會(huì)打印更改的值 Jimmy。同理，如果你在子組件中對(duì)服務(wù)的信息，在子組件打印相關(guān)的值的同時(shí)，在父組件也會(huì)打印。
