Angular組件間進(jìn)行通信的方法有哪些

這篇“Angular組件間進(jìn)行通信的方法有哪些”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Angular組件間進(jìn)行通信的方法有哪些”文章吧。

1. 父組件通過屬性傳遞值給子組件

相當(dāng)于你自定義了一個(gè)屬性，通過組件的引入，將值傳遞給子組件。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，回填到頁面。

<!-- child.component.html -->

<h2>Hello! {{ parentProp }}</h2>

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');
  }
}

通過 emit 通知父組件，父組件對(duì)事件進(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)
  }
}

在父組件中，我們對(duì) child 組件來的數(shù)據(jù)進(jìn)行監(jiān)聽后，這里采用了 setTimeout 的異步操作。是因?yàn)槲覀冊(cè)谧咏M件中初始化后就進(jìn)行了 emit，這里的異步操作是防止 Race Condition 競(jìng)爭(zhēng)出錯(cuò)。

我們還得在組件中添加 fromChild 這個(gè)方法，如下：

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

<h2>Hello! {{ msg }}</h2>
<app-child (childSayHi)="fromChild($event)"></app-child>

3. 通過引用，父組件獲取子組件的屬性和方法

我們通過操縱引用的方式，獲取子組件對(duì)象，然后對(duì)其屬性和方法進(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.')
  }
}

我們?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ò)的原因如下：

4. 通過 service 去變動(dòng)

我們結(jié)合 rxjs 來演示。

rxjs 是使用 Observables 的響應(yīng)式編程的庫(kù)，它使編寫異步或基于回調(diào)的代碼更容易。

后期會(huì)有一篇文章記錄 rxjs，敬請(qǐng)期待

我們先來創(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)來打印 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)來打印 Child: null
          // 一秒后打印 Child: Jimmy
        }
      })
  }
}

在父組件中，我們一秒鐘之后更改值。所以在父子組件中，一進(jìn)來就會(huì)打印 msg 的初始值 null，然后過了一秒鐘之后，就會(huì)打印更改的值 Jimmy。同理，如果你在子組件中對(duì)服務(wù)的信息，在子組件打印相關(guān)的值的同時(shí)，在父組件也會(huì)打印。

以上就是關(guān)于“Angular組件間進(jìn)行通信的方法有哪些”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。