Angular父子組件通訊的方法

這篇文章主要介紹Angular父子組件通訊的方法，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

概述

Angular組件間通訊

組件樹，1號是根組件AppComponent。

組件之間松耦合，組件之間知道的越少越好。

組件4里面點擊按鈕，觸發(fā)組件5的初始化邏輯。

傳統(tǒng)做法：在按鈕4的點擊事件里調(diào)用組件5的方法。緊密耦合。

Angular：在組件4根本不知道組件5存在的情況下實現(xiàn)。

使用松耦合的方式在組件之間傳遞數(shù)據(jù)開發(fā)出高重用性的組件。

使用輸入輸出屬性在父子關(guān)系的組件之間傳遞數(shù)據(jù)。

一、輸入輸出屬性概述

組件設(shè)計成黑盒模型，用輸入屬性聲明從外部世界接收什么東西。不需要知道這些東西從哪里來來。

組件只需要知道當(dāng)它需要的東西外部世界提供給它以后它應(yīng)該怎么做。

組件通過輸出屬性發(fā)射事件告訴外部世界可能感興趣的東西。至于事件發(fā)射給誰組件也不需要知道。

誰感興趣誰自己訂閱組件發(fā)射的事件。

二、輸入屬性

子組件定義了2個輸入屬性，被@Input()裝飾器裝飾的屬性。

@Input()
  stockCode:string;
  @Input()
  amount:number;

父組件通過屬性綁定到子組件輸入屬性的方式把stock屬性綁定到子組件的stockCode屬性上。

<div>
  我是父組件
</div>
<div>
  <input type="text" [(ngModel)]="stock" placeholder="請輸入股票代碼">
  <app-order [stockCode]=stock [amount]="100"></app-order>
</div>

三、屬性綁定是單向的，從父組件到子組件

每隔3s重置子組件的stockCode的值為Apple。

export class OrderComponent implements OnInit {

  @Input()
  stockCode:string;
  @Input()
  amount:number;

  constructor() { 
    setInterval(()=>{
      this.stockCode='Apple'
    },3000)
  }

  ngOnInit() {
  }
}

當(dāng)子組件的stockCode的值變?yōu)锳pple的時候，父組件的stock的值并沒有改變。說明綁定是單向的，只能是父組件改變子組件，子組件屬性改變不會影響到父組件。

四、輸出屬性

Angular組件可以使用EventEmitter對象發(fā)射自定義事件，這些事件可以被其它組件處理。 EventEmitter是Rxjs中Subject類的一個子類，在響應(yīng)式編程中，它既可以作為被觀察者，也可以作為觀察者。就是說EventEmitter對象即可以通過它的emit方法發(fā)射自定義事件，也可以通過subscribe方法來訂閱EventEmitter發(fā)射出來的事件流。

如何使用EventEmit從組件內(nèi)部向外發(fā)射事件？

例子場景：報價組件

假設(shè)需要一個組件，可以連接到股票交易所，并且實時的顯示變動的股票價格，為了讓這個組件可以在不同的金融類的應(yīng)用中重用，除了實時顯示股票價格，組件還應(yīng)該將最新的股票價格發(fā)送到組件之外，這樣其它的組件就可以針對變動的股票價格執(zhí)行相應(yīng)的業(yè)務(wù)邏輯。

Note：將特定的數(shù)據(jù)結(jié)構(gòu)用類或接口來明確定義是一個良好的習(xí)慣

1、先模擬一個實時變動的IBM的股票價格

export class PriceQuoteComponent implements OnInit {

  //不連接股票服務(wù)，用一個隨機(jī)數(shù)生成器模擬股票價格的變化，并將股票代碼和最新的價格顯示出來

  stockCode:string="IBM";
  price:number;

  constructor() {
    setInterval(()=>{
      let priceQuote:PriceQuote=new PriceQuote(this.stockCode,100*Math.random());
      this.price=priceQuote.lastPrice;
    },1000)
  }

  ngOnInit() {
  }

}


//封裝一個報價對象來封裝股票價格信息
//將特定的數(shù)據(jù)結(jié)構(gòu)用類或接口來明確定義是一個良好的習(xí)慣
export class PriceQuote {
  constructor(public stockCode: string, //股票代碼
    public lastPrice: number //最新價格
  ) {
  }
}

2、把信息輸出出去，告訴組件外部，誰感興趣誰來訂閱

EventEmit后面的范型是要往出發(fā)射的事件的數(shù)據(jù)是什么類型的。

import { Component, OnInit, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-price-quote',
  templateUrl: './price-quote.component.html',
  styleUrls: ['./price-quote.component.css']
})
export class PriceQuoteComponent implements OnInit {

  //不連接股票服務(wù)，用一個隨機(jī)數(shù)生成器模擬股票價格的變化，并將股票代碼和最新的價格顯示出來

  stockCode: string = "IBM";
  price: number;

  @Output() //發(fā)射事件需要寫上Output
  //EventEmitter需要一個范型
  lastPrice: EventEmitter<PriceQuote> = new EventEmitter();
  //

  constructor() {
    setInterval(() => {
      let priceQuote: PriceQuote = new PriceQuote(this.stockCode, 100 * Math.random());
      this.price = priceQuote.lastPrice;
      //用lastPrice emit一個值出去
      this.lastPrice.emit(priceQuote);
    }, 1000)
  }

  ngOnInit() {
  }

}
//封裝一個報價對象來封裝股票價格信息
//將特定的數(shù)據(jù)結(jié)構(gòu)用類或接口來明確定義是一個良好的習(xí)慣
export class PriceQuote {
  constructor(public stockCode: string, //股票代碼
    public lastPrice: number //最新價格
  ) {
  }
}

3、在父組件中接收報價信息并顯示

父組件模版中通過事件綁定的方式來捕獲并處理。

export class AppComponent {
  stock = "";
  priceQuote: PriceQuote = new PriceQuote("", 0);

  //event的類型就是子組件emit的時候發(fā)射出來的數(shù)據(jù)的類型
  //父組件中通過event就可以拿到
  priceQuoteHandler(event:PriceQuote){
    this.priceQuote=event;
  }
}

模版

<!--默認(rèn)情況下，事件名字就是output輸出屬性的名字-->
<app-price-quote (lastPrice)="priceQuoteHandler($event)"></app-price-quote>

<div>
  這是在報價組件外部<br/>
  股票代碼是{{priceQuote.stockCode}},
  股票價格是{{priceQuote.lastPrice | number:"2.0-2"}}
</div>

默認(rèn)情況下，事件名字就是output輸出屬性的名字，可以改變事件名字，通過

@Output("priceChange") //發(fā)射事件需要寫上Output
  //EventEmitter需要一個范型
  lastPrice: EventEmitter<PriceQuote> = new EventEmitter();

模版中也改為

<app-price-quote (priceChange)="priceQuoteHandler($event)"></app-price-quote>

以上是“Angular父子組件通訊的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！