Angular4学习笔记(六)- Input和Output
生活随笔
收集整理的這篇文章主要介紹了
Angular4学习笔记(六)- Input和Output
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
概述
Angular中的輸入輸出是通過注解@Input和@Output來標識,它位于組件控制器的屬性上方。
輸入輸出針對的對象是父子組件。
演示
Input
- 新建項目connInComponents:ng new connInComponents.
- 新增組件stock:ng g component stock.
- 在stock.component.ts中新增屬性stockName并將其標記為輸入@Input():
- 既然有@Input()則應有對應的父組件,此處使用默認生成的主組件app.
在父組件中定義屬性keyWork并通過視圖文件app.component.html中的標簽<input>來進行雙向綁定,最后,在視圖文件app.component.html中嵌入子組件并進行賦值:
注意,[(ngModel)]需要在app.module.ts中引入模塊FormsModule。
這樣就完成了父組件向子組件賦值的操作了。
- 在子組件中進行展示
Output
Output的賦值操作不像Input那樣簡單,它需要通過位于@angular/core包下的EventEmitter對象來監聽并處理數據。并且需要傳入泛型類來規定參數類型。
需求
在父子組件中各自定義一個表示股票價格的屬性,并通過Output將子組件中的價格信息傳給父組件。
- 由于EventEmitter需要傳入泛型類,因此我們首先定義一個股票信息類:
- 在子組件stock.component.ts中新增屬性stockPrice和event,并在初始化方法中為stockPrice賦值并通過event將當前綁定對象發射出去:
此時子組件的發射動作已完成,那么如何接收發射的數據呢?
- 在父組件中定義價格屬性currentPrice和接收方法eventHandler:
- 在嵌入的子組件視圖元素<app-stock>上添加綁定關系:
其中event對應子組件屬性,eventHandler對應父組件接收并處理子組件傳來的方法,$event代表泛型類參數,此處是一個類型為StockInfo的實例。
此時賦值操作已經完成,在父子組件的視圖文件中添加顯示接收到的信息(股票價格)即可:
stock.component.html
app.component.html
<div>股票名稱:{{keyWord}}<br>當前價格:{{currentPrice | number:'2.1-2'}} </div>tips
@Output可以傳遞參數,其值與嵌入的子組件視圖元素<app-stock>上綁定的數據名稱統一。
如@Output('lastPrice'),那么
相應改為:
<app-stock [stockName]="keyWord" (lastPrice)="eventHandler($event)"></app-stock>效果
Demo
下載
創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的Angular4学习笔记(六)- Input和Output的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: linux禁止修 5在线阅读,linux
- 下一篇: Kotlin Native新增Objec