詳解Angular父子組件通訊
概述
Angular組件間通訊
組件樹，1號是根組件AppComponent。
組件之間松耦合，組件之間知道的越少越好。
組件4里面點(diǎn)擊按鈕，觸發(fā)組件5的初始化邏輯。
傳統(tǒng)做法：在按鈕4的點(diǎn)擊事件里調(diào)用組件5的方法。緊密耦合。
Angular：在組件4根本不知道組件5存在的情況下實(shí)現(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è)需要一個組件，可以連接到股票交易所，并且實(shí)時的顯示變動的股票價格，為了讓這個組件可以在不同的金融類的應(yīng)用中重用，除了實(shí)時顯示股票價格，組件還應(yīng)該將最新的股票價格發(fā)送到組件之外，這樣其它的組件就可以針對變動的股票價格執(zhí)行相應(yīng)的業(yè)務(wù)邏輯。
Note：將特定的數(shù)據(jù)結(jié)構(gòu)用類或接口來明確定義是一個良好的習(xí)慣
1、先模擬一個實(shí)時變動的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>
總結(jié)
通過輸出屬性發(fā)射事件，并通過事件攜帶數(shù)據(jù)，在父組件模版中通過事件綁定的方式來捕獲并處理。
如果兩個組件之間不存父子關(guān)系，如何以一種松耦合的方式來傳遞數(shù)據(jù)。此時需要使用中間人模式。
以上就是詳解Angular父子組件通訊的詳細(xì)內(nèi)容，更多關(guān)于Angular父子組件通訊的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)表格分頁代碼
最近一直在學(xué)習(xí)angularjs相關(guān)知識，在學(xué)習(xí)過程中寫了一個小demo，下面把代碼思路分享給大家，感興趣的朋友一起學(xué)習(xí)2016-04-04
Angular中的ActivatedRoute和Router原理解釋
這篇文章主要為大家介紹了Angular中的ActivatedRoute和Router原理解釋，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
Angular4項目中添加i18n國際化插件ngx-translate的步驟詳解
這篇文章主要跟大家介紹了關(guān)于Angular4項目中添加i18n國際化插件ngx-translate的步驟，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-07-07
這篇文章主要介紹了AngularJS的臟檢查深入分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
上傳文件在很多時候都能用到，這篇文章主要介紹了AngularJS上傳文件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
本篇文章主要介紹了詳解Angular 4 表單快速入門，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
解決Angular2 router.navigate刷新頁面的問題
今天小編就為大家分享一篇解決Angular2 router.navigate刷新頁面的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本篇文章主要介紹了Angularjs中使用layDate日期控件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
AngularJS基礎(chǔ) ng-dblclick 指令用法
本文主要介紹AngularJS ng-dblclick 指令,這里對ng-dblclick基礎(chǔ)資料整理并詳細(xì)介紹,簡單的代碼實(shí)例和實(shí)現(xiàn)效果,希望能幫助學(xué)習(xí)AngularJS的朋友2016-08-08
AngularJS通過ng-route實(shí)現(xiàn)基本的路由功能實(shí)例詳解
這篇文章主要介紹了AngularJS通過ng-route實(shí)現(xiàn)基本的路由功能,結(jié)合實(shí)例形式詳細(xì)分析了AngularJS使用ng-route實(shí)現(xiàn)路由功能的操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-12-12