帶你了解Angular組件間進行通訊的幾種方法

Angular元件間怎麼通訊？以下這篇文章帶大家了解Angular中元件通訊的方法，希望對大家有幫助！

上一篇，我們講了 Angular 結合 NG-ZORRO 快速開發。前端開發，很大程度是組件化開發，永遠遠離不開組件之間的通訊。那麼，在 Angular 開發中，其元件之間的通訊是怎麼樣的呢？ 【相關教學推薦：《angular教學》】

舉一反三，Vue 和React 中大同小異

#本文純文字，比較枯燥。因為控制台列印的東西比較雞肋，所以就不配圖了，嗯～希望讀者跟著說明程式碼走一遍更容易吸收～

1. 父元件透過屬性傳遞值給子元件

相當於你自訂了一個屬性，透過元件的引入，將值傳遞給子元件。 Show you the CODE。

<!-- parent.component.html -->

<app-child [parentProp]="&#39;My kid.&#39;"></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(&#39;Parent: &#39; + msg); 
          // 刚进来打印 Parent: null
          // 一秒后打印 Parent: Jimmy
        }
      });
    setTimeout(() => {
      this.parentAndChildService.setMessage(&#39;Jimmy&#39;);
    }, 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組件間進行通訊的幾種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！