這次帶給大家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 = '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類型就是子元件傳遞事件的類型。
簡單的說,就是子元件透過emit發射事件priceChange,並將值傳遞出來,父元件在使用子元件時會觸發priceChange事件,接收到值。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是Angular4輸入與輸出怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!