#頭條創作挑戰賽#
本文同步本人掘金平台的文章：https://juejin.cn/post/7084011213146816542
上一篇，我們講了 Angular 結合 NG-ZORRO 快速開發。前端開發，很大程度上是元件化開發，永遠離不開元件之間的通信。那麼，在 Angular 開發中，其元件之間的通信是怎麼樣的呢？
舉一反三，Vue 和 React 中大同小異
本文純文字，比較枯燥。因為控制台列印的東西比較雞肋，是以就不配圖了，嗯～希望讀者跟着說明代碼走一遍更容易吸收～
1. 父元件通過屬性傳遞值給子元件
相當于你自定義了一個屬性，通過元件的引入，将值傳遞給子元件。Show you the CODE。
<!-- parent.component.html -->
<app-child [parentProp]="'My kid.'"></app-child>
複制代碼 在父元件中調用子元件，這裡命名一個 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，回填到頁面。
<!-- child.component.html -->
<h1>Hello! {{ parentProp }}</h1>
複制代碼 2. 子元件通過 Emitter 事件傳遞資訊給父元件
通過 new EventEmitter() 将子元件的資料傳遞給父元件。
// 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');
}
}
複制代碼 通過 emit 通知父元件，父元件對事件進行監聽。
// 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)
}
}
複制代碼 在父元件中，我們對 child 元件來的資料進行監聽後，這裡采用了 setTimeout 的異步操作。是因為我們在子元件中初始化後就進行了 emit，這裡的異步操作是防止 Race Condition 競争出錯。
我們還得在元件中添加 fromChild 這個方法，如下：
<!-- parent.component.html -->
<h1>Hello! {{ msg }}</h1>
<app-child (childSayHi)="fromChild($event)"></app-child>
複制代碼 3. 通過引用，父元件擷取子元件的屬性和方法
我們通過操縱引用的方式，擷取子元件對象，然後對其屬性和方法進行通路。
我們先設定子元件的示範内容：
// 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.')
}
}
複制代碼 我們在父元件上設定子元件的引用辨別 #childComponent：
<!-- parent.component.html -->
<app-child #childComponent></app-child>
複制代碼 之後在 javascript 檔案上調用：
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)
}
}
複制代碼 這種方法有個限制，就是子屬性的修飾符需要是 public，當是 protected 或者 private 的時候，會報錯。你可以将子元件的修飾符更改下嘗試。報錯的原因如下：
| 類型 | 使用範圍 |
| public | 允許在累的内外被調用，作用範圍最廣 |
| protected | 允許在類内以及繼承的子類中使用，作用範圍适中 |
| private | 允許在類内部中使用，作用範圍最窄 |
4. 通過 service 去變動
我們結合 rxjs 來示範。
rxjs 是使用 Observables 的響應式程式設計的庫，它使編寫異步或基于回調的代碼更容易。
後期會有一篇文章記錄 rxjs，敬請期待
我們先來建立一個名為 parent-and-child 的服務。
// parent-and-child.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs'; // BehaviorSubject 有實時的作用，擷取最新值
@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);
}
}
複制代碼 接着，我們在父子元件中引用，它們的資訊是共享的。
// parent.component.ts
import { Component, OnDestroy, OnInit } from '@angular/core';
// 引入服務
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);
// 剛進來列印 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);
// 剛進來列印 Child: null
// 一秒後列印 Child: Jimmy
}
})
}
}
複制代碼 在父元件中，我們一秒鐘之後更改值。是以在父子元件中，一進來就會列印 msg 的初始值 null，然後過了一秒鐘之後，就會列印更改的值 Jimmy。同理，如果你在子元件中對服務的資訊，在子元件列印相關的值的同時，在父元件也會列印。
【完】✅
![【angular】環境搭建及遇到的問題[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)