首頁  >  文章  >  web前端  >  在Angular4中輸入屬性與輸出屬性(詳細教學)

在Angular4中輸入屬性與輸出屬性(詳細教學)

亚连
亚连原創
2018-06-23 16:17:171213瀏覽

這篇文章主要介紹了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.ts

export class PriceQuoteComponent implements OnInit{
 stockCode: string = &#39;IBM&#39;;
 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:&#39;2.2-2&#39;}}
</p>

接著我們在父元件中接收事件

app.component.html

<app-price-quote (priceChange)="priceQuoteHandler($event)"></app-price-quote>
<p>
 这是在报价组件外, 股票代码是{{priceQuote.stokcCode}},
 股票价格是{{priceQuote.lastPrice | number:&#39;2.2-2&#39;}}
</p>

事件綁定和原生的事件綁定是一樣的,都是將事件名稱放在()中。

app.component.ts

export class AppComponent{
 priceQuote:PriceQuote = new PriceQuote(&#39;&#39;, 0);
 priceQuoteHandler(event:PriceQuote){
  this.priceQuote = event;
 }
}

這裡的event型別就是子元件傳遞事件的型別。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

詳細介紹Vue.js中ref ($refs)用法

在vue中詳細解讀父子通訊

使用Vue如何實作數字鍵盤元件#

以上是在Angular4中輸入屬性與輸出屬性(詳細教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn