本文主要介紹了Angular4的輸入屬性與輸出屬性,結合實例形式詳細分析了Angular4輸入屬性與輸出屬性的概念、功能及相關使用技巧,需要的朋友可以參考下,希望能幫助到大家。
Angular4輸入屬性
輸入屬性通常用於父元件向子元件傳遞訊息
舉個栗子:我們在父元件傳遞股票代碼,這裡的子元件我們叫它app-order
首先在app.order.component.ts中宣告需要由父元件傳遞進來的值
order.component.ts
... @Input() stockCode: string @Input() amount: string ...
order.component.html
<p>这里是子组件</p> <p>股票代码为{{stockCode}}</p> <p>股票总数为{{amount}}</p>
... stock: string ...
<input type="text" placeholder="请输入股票代码" [(ngModel)]="stock"> <app-order [stockCode]="stock" [amount]="100"></app-order>
export class PriceQuoteComponent implements OnInit{ stockCode: string = 'IBM'; price: number; //使用EventEmitter发射事件 //泛型是指往外发射的事件是什么类型 //priceChange为事件名称 @Output() priceChange:EventEmitter<PriceQuote> = new EventEmitter(); constructor(){ setInterval(() => { let priceQuote = new PriceQuote(this.stockCode, 100*Math.random()); this.price = priceQuote.lastPrice; //发射事件 this.priceChange.emit(priceQuote); }) } ngInit(){ } } //股票信息类 //stockCode为股票代码,lastPrice为股票价格 export class PriceQuote{ constructor(public stockCode:string, public lastPrice:number ) }
#
<p> 这里是报价组件 </p> <p> 股票代码是{{stockCode}} </p> <p> 股票价格是{{price | number:'2.2-2'}} </p>
##接著我們在父元件中接收事件
app.component.html
<app-price-quote (priceChange)="priceQuoteHandler($event)"></app-price-quote> <p> 这是在报价组件外, 股票代码是{{priceQuote.stokcCode}}, 股票价格是{{priceQuote.lastPrice | number:'2.2-2'}} </p>
事件綁定和原生的事件綁定是一樣的,都是將事件名稱放在()中。
app.component.ts
export class AppComponent{ priceQuote:PriceQuote = new PriceQuote('', 0); priceQuoteHandler(event:PriceQuote){ this.priceQuote = event; } }
這裡的event型別就是子元件傳遞事件的型別。
簡單的說,就是子元件透過emit發射事件priceChange,並將值傳遞出來,父元件在使用子元件時會觸發priceChange事件,接收到值。
相關推薦:
Angular4中項目的準備與環境建置操作Angular4中如何顯示內容的CSS樣式範例程式碼Angular4中路由Router類別的實例詳解以上是詳解Angular4的輸入屬性與輸出屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!