Angular4的輸入屬性與輸出屬性實(shí)例詳解
本文實(shí)例講述了Angular4的輸入屬性與輸出屬性。分享給大家供大家參考,具體如下:
Angular4輸入屬性
輸入屬性通常用于父組件向子組件傳遞信息
舉個(gè)栗子:我們在父組件向子組件傳遞股票代碼,這里的子組件我們叫它app-order
首先在app.order.component.ts中聲明需要由父組件傳遞進(jìn)來的值
order.component.ts
... @Input() stockCode: string @Input() amount: string ...
order.component.html
<p>這里是子組件</p>
<p>股票代碼為{{stockCode}}</p>
<p>股票總數(shù)為{{amount}}</p>
然后我們需要在父組件(app.component)中向子組件傳值
app.component.ts
... stock: string ...
app.component.html
<input type="text" placeholder="請(qǐng)輸入股票代碼" [(ngModel)]="stock"> <app-order [stockCode]="stock" [amount]="100"></app-order>
這里我們使用了Angular的雙向數(shù)據(jù)綁定,將用戶輸入的值和控制器中的stock進(jìn)行綁定。然后傳遞給子組件,子組件接收后在頁面顯示。
Angular4輸出屬性
當(dāng)子組件需要向父組件傳遞信息時(shí)需要用到輸出屬性。
舉個(gè)栗子:當(dāng)我們從股票交易所獲得股票的實(shí)時(shí)價(jià)格時(shí),希望外部也可以得到這個(gè)信息。為了方便,這里的實(shí)時(shí)股票價(jià)格我們通過一個(gè)隨機(jī)數(shù)來模擬。這里的子組件我們叫它app.price.quote
使用EventEmitter從子組件向外發(fā)射事件
price.quote.ts
export class PriceQuoteComponent implements OnInit{
stockCode: string = 'IBM';
price: number;
//使用EventEmitter發(fā)射事件
//泛型是指往外發(fā)射的事件是什么類型
//priceChange為事件名稱
@Output()
priceChange:EventEmitter<PriceQuote> = new EventEmitter();
constructor(){
setInterval(() => {
let priceQuote = new PriceQuote(this.stockCode, 100*Math.random());
this.price = priceQuote.lastPrice;
//發(fā)射事件
this.priceChange.emit(priceQuote);
})
}
ngInit(){
}
}
//股票信息類
//stockCode為股票代碼,lastPrice為股票價(jià)格
export class PriceQuote{
constructor(public stockCode:string,
public lastPrice:number
)
}
price.quote.html
<p>
這里是報(bào)價(jià)組件
</p>
<p>
股票代碼是{{stockCode}}
</p>
<p>
股票價(jià)格是{{price | number:'2.2-2'}}
</p>
接著我們在父組件中接收事件
app.component.html
<app-price-quote (priceChange)="priceQuoteHandler($event)"></app-price-quote>
<div>
這是在報(bào)價(jià)組件外, 股票代碼是{{priceQuote.stokcCode}},
股票價(jià)格是{{priceQuote.lastPrice | number:'2.2-2'}}
</div>
事件綁定和原生的事件綁定是一樣的,都是將事件名稱放在()中。
app.component.ts
export class AppComponent{
priceQuote:PriceQuote = new PriceQuote('', 0);
priceQuoteHandler(event:PriceQuote){
this.priceQuote = event;
}
}
這里的event類型就是子組件傳遞事件的類型。
簡單的說,就是子組件通過emit發(fā)射事件priceChange,并將值傳遞出來,父組件在使用子組件時(shí)會(huì)觸發(fā)priceChange事件,接收到值。
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
Angular.js實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)60秒按鈕的簡單方法
最近做項(xiàng)目的時(shí)候又遇到了驗(yàn)證碼倒計(jì)時(shí)的需求,發(fā)現(xiàn)這個(gè)功能還是挺實(shí)用的,所以就想著總結(jié)一下,下面這篇文章主要給大家介紹了關(guān)于利用Angular.js如何實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕的簡單方法,需要的朋友可以參考借鑒,下面來一起看看吧。2017-10-10
詳解如何在Angular優(yōu)雅編寫HTTP請(qǐng)求
這篇文章主要介紹了詳解如何在Angular優(yōu)雅編寫HTTP請(qǐng)求,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
Material(包括Material Icon)在Angular2中的使用詳解
這篇文章主要介紹了Material(包括Material Icon)在Angular2中的使用,需要的朋友可以參考下2018-02-02
AngularJS實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)畫矩形框示例【可兼容IE8】
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)畫矩形框,涉及基于AngularJS的事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05
詳解在Angularjs中ui-sref和$state.go如何傳遞參數(shù)
這篇文章主要介紹了詳解在Angularjs中ui-sref和$state.go如何傳遞參數(shù),詳細(xì)的介紹了ui-sref和$state.go的區(qū)別和如何傳參,有興趣的可以了解下2017-04-04
Angular實(shí)現(xiàn)搜索框及價(jià)格上下限功能
這篇文章主要為大家詳細(xì)介紹了Angular實(shí)現(xiàn)搜索框及價(jià)格上下限功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01
angularjs實(shí)現(xiàn)Tab欄切換效果
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)Tab欄切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
Angular實(shí)現(xiàn)的日程表功能【可添加及隱藏顯示內(nèi)容】
這篇文章主要介紹了Angular實(shí)現(xiàn)的日程表功能,帶有向日程表中添加內(nèi)容及隱藏顯示內(nèi)容的功能,涉及AngularJS事件響應(yīng)及頁面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-12-12
AngularJS實(shí)現(xiàn)ajax請(qǐng)求的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)ajax請(qǐng)求的方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)ajax請(qǐng)求的前端界面、ajax交互及后臺(tái)php處理技巧,需要的朋友可以參考下2016-11-11

