站長資訊網(wǎng)Angular組件間怎么通信？下面本篇文章帶大家了解一下Angular中組件通信的方法，希望對大家有所幫助！
上一篇，我們講了 Angular 結(jié)合 NG-ZORRO 快速開發(fā)。前端開發(fā)，很大程度上是組件化開發(fā)，永遠(yuǎn)離不開組件之間的通信。那么，在 Angular 開發(fā)中，其組件之間的通信是怎么樣的呢？【相關(guān)教程推薦：《angular教程》】
舉一反三，
Vue和React中大同小異
本文純文字，比較枯燥。因?yàn)榭刂婆_打印的東西比較雞肋，所以就不配圖了，嗯～希望讀者跟著說明代碼走一遍更容易吸收～
1. 父組件通過屬性傳遞值給子組件
相當(dāng)于你自定義了一個屬性，通過組件的引入，將值傳遞給子組件。Show you the CODE。
<!-- parent.component.html --> <app-child [parentProp]="'My kid.'"></app-child>
登錄后復(fù)制
在父組件中調(diào)用子組件，這里命名一個 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 { } }
登錄后復(fù)制
子組件接受父組件傳入的變量 parentProp，回填到頁面。
<!-- child.component.html --> <h1>Hello! {{ parentProp }}</h1>
登錄后復(fù)制
2. 子組件通過 Emitter 事件傳遞信息給父組件
通過 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'); } }
登錄后復(fù)制
通過 emit 通知父組件，父組件對事件進(jìn)行監(jiān)聽。
// 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) } }
登錄后復(fù)制
在父組件中，我們對 child 組件來的數(shù)據(jù)進(jìn)行監(jiān)聽后，這里采用了 setTimeout 的異步操作。是因?yàn)槲覀冊谧咏M件中初始化后就進(jìn)行了 emit，這里的異步操作是防止 Race Condition 競爭出錯。
我們還得在組件中添加 fromChild 這個方法，如下：
<!-- parent.component.html --> <h1>Hello! {{ msg }}</h1> <app-child (childSayHi)="fromChild($event)"></app-child>
登錄后復(fù)制
3. 通過引用，父組件獲取子組件的屬性和方法
我們通過操縱引用的方式，獲取子組件對象，然后對其屬性和方法進(jì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.') } }
登錄后復(fù)制
我們在父組件上設(shè)置子組件的引用標(biāo)識 #childComponent：
<!-- parent.component.html --> <app-child #childComponent></app-child>
登錄后復(fù)制
之后在 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) } }
登錄后復(fù)制
這種方法有個限制?，就是子屬性的修飾符需要是 public，當(dāng)是 protected 或者 private 的時候，會報(bào)錯。你可以將子組件的修飾符更改下嘗試。報(bào)錯的原因如下：
| 類型 | 使用范圍 |
|---|---|
| public | 允許在累的內(nèi)外被調(diào)用，作用范圍最廣 |
| protected | 允許在類內(nèi)以及繼承的子類中使用，作用范圍適中 |
| private | 允許在類內(nèi)部中使用，作用范圍最窄 |
4. 通過 service 去變動
我們結(jié)合 rxjs 來演示。
rxjs 是使用 Observables 的響應(yīng)式編程的庫，它使編寫異步或基于回調(diào)的代碼更容易。
后期會有一篇文章記錄
rxjs，敬請期待
我們先來創(chuàng)建一個名為 parent-and-child 的服務(wù)。
// parent-and-child.service.ts import { Injectable } from '@angular/core'; import { BehaviorSubject, Observable } from 'rxjs'; // BehaviorSubject 有實(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); } }
登錄后復(fù)制
接著，我們在父子組件中引用，它們的信息是共享的。
// 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)來打印 Parent: null // 一秒后打印 Parent: Jimmy } }); setTimeout(() => { this.parentAndChildService.setMessage('Jimmy'); }, 1000) } ngOnDestroy() { // 取消訂閱 this.unsubscribe$.next(true); this.unsubscribe$.complete(); } }
登錄后復(fù)制
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)來打印 Child: null // 一秒后打印 Child: Jimmy } }) } }
登錄后復(fù)制
在父組件中，我們一秒鐘之后更改值。所以在父子組件中，一進(jìn)來就會打印 msg 的初始值 null，然后過了一秒鐘之后，就會打印更改的值 Jimmy。同理，如果你在子組件中對服務(wù)的信息，在子組件打印相關(guān)的值的同時，在父組件也會打印。
