這篇文章主要介紹了Angular4的輸入屬性與輸出屬性,結合實例形式詳細分析了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>
然後我們需要在父元件(app. component)中向子元件傳值
app.component.ts
... stock: string ...
app.component.html
<input type="text" placeholder="请输入股票代码" [(ngModel)]="stock"> <app-order [stockCode]="stock" [amount]="100"></app-order>
這裡我們使用了Angular的雙向資料綁定,將使用者輸入的值和控制器中的stock進行綁定。然後傳遞給子元件,子元件接收後在頁面顯示。
Angular4輸出屬性
#當子元件需要傳遞訊息給父元件時需要用到輸出屬性。
舉個栗子:當我們從股票交易所獲得股票的即時價格時,希望外部也可以得到這個資訊。為了方便,這裡的即時股票價格我們透過一個隨機數字來模擬。這裡的子元件我們叫它app.price.quote
##使用EventEmitter從子元件向外發射事件
price.quote.tsexport 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 ) }price.quote.html
<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型別就是子元件傳遞事件的型別。 上面是我整理給大家的,希望今後對大家有幫助。 相關文章:
以上是在Angular4中輸入屬性與輸出屬性(詳細教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!