詳解Angular父子組件通訊
概述
Angular組件間通訊
組件樹(shù)，1號(hào)是根組件AppComponent。
組件之間松耦合，組件之間知道的越少越好。
組件4里面點(diǎn)擊按鈕，觸發(fā)組件5的初始化邏輯。
傳統(tǒng)做法：在按鈕4的點(diǎn)擊事件里調(diào)用組件5的方法。緊密耦合。
Angular：在組件4根本不知道組件5存在的情況下實(shí)現(xiàn)。
使用松耦合的方式在組件之間傳遞數(shù)據(jù)開(kāi)發(fā)出高重用性的組件。
使用輸入輸出屬性在父子關(guān)系的組件之間傳遞數(shù)據(jù)。
一、輸入輸出屬性概述
組件設(shè)計(jì)成黑盒模型，用輸入屬性聲明從外部世界接收什么東西。不需要知道這些東西從哪里來(lái)來(lái)。
組件只需要知道當(dāng)它需要的東西外部世界提供給它以后它應(yīng)該怎么做。
組件通過(guò)輸出屬性發(fā)射事件告訴外部世界可能感興趣的東西。至于事件發(fā)射給誰(shuí)組件也不需要知道。
誰(shuí)感興趣誰(shuí)自己訂閱組件發(fā)射的事件。
二、輸入屬性
子組件定義了2個(gè)輸入屬性，被@Input()裝飾器裝飾的屬性。
@Input() stockCode:string; @Input() amount:number;
父組件通過(guò)屬性綁定到子組件輸入屬性的方式把stock屬性綁定到子組件的stockCode屬性上。
<div> 我是父組件 </div> <div> <input type="text" [(ngModel)]="stock" placeholder="請(qǐng)輸入股票代碼"> <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的時(shí)候，父組件的stock的值并沒(méi)有改變。說(shuō)明綁定是單向的，只能是父組件改變子組件，子組件屬性改變不會(huì)影響到父組件。
四、輸出屬性
Angular組件可以使用EventEmitter對(duì)象發(fā)射自定義事件，這些事件可以被其它組件處理。 EventEmitter是Rxjs中Subject類(lèi)的一個(gè)子類(lèi)，在響應(yīng)式編程中，它既可以作為被觀察者，也可以作為觀察者。就是說(shuō)EventEmitter對(duì)象即可以通過(guò)它的emit方法發(fā)射自定義事件，也可以通過(guò)subscribe方法來(lái)訂閱EventEmitter發(fā)射出來(lái)的事件流。
如何使用EventEmit從組件內(nèi)部向外發(fā)射事件？
例子場(chǎng)景：報(bào)價(jià)組件
假設(shè)需要一個(gè)組件，可以連接到股票交易所，并且實(shí)時(shí)的顯示變動(dòng)的股票價(jià)格，為了讓這個(gè)組件可以在不同的金融類(lèi)的應(yīng)用中重用，除了實(shí)時(shí)顯示股票價(jià)格，組件還應(yīng)該將最新的股票價(jià)格發(fā)送到組件之外，這樣其它的組件就可以針對(duì)變動(dòng)的股票價(jià)格執(zhí)行相應(yīng)的業(yè)務(wù)邏輯。
Note：將特定的數(shù)據(jù)結(jié)構(gòu)用類(lèi)或接口來(lái)明確定義是一個(gè)良好的習(xí)慣
1、先模擬一個(gè)實(shí)時(shí)變動(dòng)的IBM的股票價(jià)格
export class PriceQuoteComponent implements OnInit {
//不連接股票服務(wù)，用一個(gè)隨機(jī)數(shù)生成器模擬股票價(jià)格的變化，并將股票代碼和最新的價(jià)格顯示出來(lái)
stockCode:string="IBM";
price:number;
constructor() {
setInterval(()=>{
let priceQuote:PriceQuote=new PriceQuote(this.stockCode,100*Math.random());
this.price=priceQuote.lastPrice;
},1000)
}
ngOnInit() {
}
}
//封裝一個(gè)報(bào)價(jià)對(duì)象來(lái)封裝股票價(jià)格信息
//將特定的數(shù)據(jù)結(jié)構(gòu)用類(lèi)或接口來(lái)明確定義是一個(gè)良好的習(xí)慣
export class PriceQuote {
constructor(public stockCode: string, //股票代碼
public lastPrice: number //最新價(jià)格
) {
}
}
2、把信息輸出出去，告訴組件外部，誰(shuí)感興趣誰(shuí)來(lái)訂閱
EventEmit后面的范型是要往出發(fā)射的事件的數(shù)據(jù)是什么類(lèi)型的。
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ù)，用一個(gè)隨機(jī)數(shù)生成器模擬股票價(jià)格的變化，并將股票代碼和最新的價(jià)格顯示出來(lái)
stockCode: string = "IBM";
price: number;
@Output() //發(fā)射事件需要寫(xiě)上Output
//EventEmitter需要一個(gè)范型
lastPrice: EventEmitter<PriceQuote> = new EventEmitter();
//
constructor() {
setInterval(() => {
let priceQuote: PriceQuote = new PriceQuote(this.stockCode, 100 * Math.random());
this.price = priceQuote.lastPrice;
//用lastPrice emit一個(gè)值出去
this.lastPrice.emit(priceQuote);
}, 1000)
}
ngOnInit() {
}
}
//封裝一個(gè)報(bào)價(jià)對(duì)象來(lái)封裝股票價(jià)格信息
//將特定的數(shù)據(jù)結(jié)構(gòu)用類(lèi)或接口來(lái)明確定義是一個(gè)良好的習(xí)慣
export class PriceQuote {
constructor(public stockCode: string, //股票代碼
public lastPrice: number //最新價(jià)格
) {
}
}
3、在父組件中接收?qǐng)?bào)價(jià)信息并顯示
父組件模版中通過(guò)事件綁定的方式來(lái)捕獲并處理。
export class AppComponent {
stock = "";
priceQuote: PriceQuote = new PriceQuote("", 0);
//event的類(lèi)型就是子組件emit的時(shí)候發(fā)射出來(lái)的數(shù)據(jù)的類(lèi)型
//父組件中通過(guò)event就可以拿到
priceQuoteHandler(event:PriceQuote){
this.priceQuote=event;
}
}
模版
<!--默認(rèn)情況下，事件名字就是output輸出屬性的名字-->
<app-price-quote (lastPrice)="priceQuoteHandler($event)"></app-price-quote>
<div>
這是在報(bào)價(jià)組件外部<br/>
股票代碼是{{priceQuote.stockCode}},
股票價(jià)格是{{priceQuote.lastPrice | number:"2.0-2"}}
</div>
默認(rèn)情況下，事件名字就是output輸出屬性的名字，可以改變事件名字，通過(guò)
@Output("priceChange") //發(fā)射事件需要寫(xiě)上Output
//EventEmitter需要一個(gè)范型
lastPrice: EventEmitter<PriceQuote> = new EventEmitter();
模版中也改為
<app-price-quote (priceChange)="priceQuoteHandler($event)"></app-price-quote>
總結(jié)
通過(guò)輸出屬性發(fā)射事件，并通過(guò)事件攜帶數(shù)據(jù)，在父組件模版中通過(guò)事件綁定的方式來(lái)捕獲并處理。
如果兩個(gè)組件之間不存父子關(guān)系，如何以一種松耦合的方式來(lái)傳遞數(shù)據(jù)。此時(shí)需要使用中間人模式。
以上就是詳解Angular父子組件通訊的詳細(xì)內(nèi)容，更多關(guān)于Angular父子組件通訊的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)表格分頁(yè)代碼
最近一直在學(xué)習(xí)angularjs相關(guān)知識(shí)，在學(xué)習(xí)過(guò)程中寫(xiě)了一個(gè)小demo，下面把代碼思路分享給大家，感興趣的朋友一起學(xué)習(xí)2016-04-04
Angular中的ActivatedRoute和Router原理解釋
這篇文章主要為大家介紹了Angular中的ActivatedRoute和Router原理解釋?zhuān)行枰呐笥芽梢越梃b參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
Angular4項(xiàng)目中添加i18n國(guó)際化插件ngx-translate的步驟詳解
這篇文章主要跟大家介紹了關(guān)于Angular4項(xiàng)目中添加i18n國(guó)際化插件ngx-translate的步驟，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-07-07
這篇文章主要介紹了AngularJS的臟檢查深入分析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
上傳文件在很多時(shí)候都能用到，這篇文章主要介紹了AngularJS上傳文件的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
本篇文章主要介紹了詳解Angular 4 表單快速入門(mén)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
解決Angular2 router.navigate刷新頁(yè)面的問(wèn)題
今天小編就為大家分享一篇解決Angular2 router.navigate刷新頁(yè)面的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
本篇文章主要介紹了Angularjs中使用layDate日期控件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
AngularJS基礎(chǔ) ng-dblclick 指令用法
本文主要介紹AngularJS ng-dblclick 指令,這里對(duì)ng-dblclick基礎(chǔ)資料整理并詳細(xì)介紹,簡(jiǎn)單的代碼實(shí)例和實(shí)現(xiàn)效果,希望能幫助學(xué)習(xí)AngularJS的朋友2016-08-08
AngularJS通過(guò)ng-route實(shí)現(xiàn)基本的路由功能實(shí)例詳解
這篇文章主要介紹了AngularJS通過(guò)ng-route實(shí)現(xiàn)基本的路由功能,結(jié)合實(shí)例形式詳細(xì)分析了AngularJS使用ng-route實(shí)現(xiàn)路由功能的操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-12-12