溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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>
<div>
這是在報價組件外， 股票代碼是{{priceQuote.stokcCode}}，
股票價格是{{priceQuote.lastPrice | number:'2.2-2'}}
</div>
事件綁定和原生的事件綁定是一樣的，都是將事件名稱放在（）中。
app.component.ts
export class AppComponent{
priceQuote:PriceQuote = new PriceQuote('', 0);
priceQuoteHandler(event:PriceQuote){
this.priceQuote = event;
}
}
這里的event類型就是子組件傳遞事件的類型。
簡單的說，就是子組件通過emit發射事件priceChange，并將值傳遞出來，父組件在使用子組件時會觸發priceChange事件，接收到值。
更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
