位置: 編程技術 - 正文
Angular4的輸入屬性與輸出屬性實例詳解(angularjs input)
編輯：rootadmin推薦整理分享Angular4的輸入屬性與輸出屬性實例詳解(angularjs input)，希望有所幫助，僅作參考，歡迎閱讀內容。
文章相關熱門搜索詞:angular設置input的值,angular nz,angular implements,angular 4,angular4教程,angular 4,angular 4,angular input,內容如對您有幫助，希望把文章鏈接給更多的朋友！
本文實例講述了Angular4的輸入屬性與輸出屬性。分享給大家供大家參考，具體如下：
Angular4輸入屬性
輸入屬性通常用于父組件向子組件傳遞信息
舉個栗子：我們在父組件向子組件傳遞股票代碼，這里的子組件我們叫它app-order
首先在app.order.component.ts中聲明需要由父組件傳遞進來的值
order.component.ts
order.component.html
然后我們需要在父組件(app.component)中向子組件傳值
app.component.ts
app.component.html
這里我們使用了Angular的雙向數據綁定，將用戶輸入的值和控制器中的stock進行綁定。然后傳遞給子組件，子組件接收后在頁面顯示。
Angular4輸出屬性
當子組件需要向父組件傳遞信息時需要用到輸出屬性。
舉個栗子：當我們從股票交易所獲得股票的實時價格時，希望外部也可以得到這個信息。為了方便，這里的實時股票價格我們通過一個隨機數來模擬。這里的子組件我們叫它app.price.quote
使用EventEmitter從子組件向外發(fā)射事件
price.quote.ts
price.quote.html
接著我們在父組件中接收事件
app.component.html
事件綁定和原生的事件綁定是一樣的，都是將事件名稱放在（）中。
app.component.ts
這里的event類型就是子組件傳遞事件的類型。
簡單的說，就是子組件通過emit發(fā)射事件priceChange，并將值傳遞出來，父組件在使用子組件時會觸發(fā)priceChange事件，接收到值。
更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
Angular2管道Pipe及自定義管道格式數據用法實例分析 本文實例講述了Angular2管道Pipe及自定義管道格式數據用法。分享給大家供大家參考，具體如下：管道(Pipe)可以根據開發(fā)者的意愿將數據格式化，還可以
詳解angularjs實現echart圖表效果最簡潔教程 本文介紹了詳解angularjs實現echart圖表效果最簡潔教程，分享給大家，具體如下：ehcart是百度做的數據圖表，基于原生js。接口和配置都寫的很好很易讀，
3種vue組件的書寫形式 本文實例為大家分享了vue組件的書寫形式，供大家參考，具體內容如下第一種使用script標簽!DOCTYPEhtmlhtmlbodydivid="app"my-component/my-component/div--注意：使用scr
標簽: angularjs input
本文鏈接地址:http://esstyw.cn/biancheng/378936.html 轉載請保留說明！
