https://angular.io/api/core/Input

Input decorator只能用在Angular class字段里, 用于指定元數據，將class字段指定成input property.

Decorator that marks a class field as an input property and supplies configuration metadata. The input property is bound to a DOM property in the template. During change detection, Angular automatically updates the data property with the DOM property’s value.

參數名稱：The name of the DOM property to which the input property is bound.

看個例子：

看個例子：

@Component({selector: 'bank-account',template: `Bank Name: {{bankName}}Account Id: {{id}}` }) class BankAccount {// This property is bound using its original name.@Input() bankName: string;// this property value is bound to a different property name// when this component is instantiated in a template.@Input('account-id') id: string;// this property is not bound, and is not automatically updated by AngularnormalizedBankName: string; }@Component({selector: 'app',template: `<bank-account bankName="RBC" account-id="4747"></bank-account>` }) class App {}

子組件的模板里，顯示bankName和id兩個模型字段。

這兩個字段，加上了@Input裝飾器，表明其數據源，需要外部消費者傳入(通常是消費這個子組件的父組件)

父組件的傳值方式：

測試截圖：

加了中括號后，表明等號右邊的是一個表達式，不能當成普通字符串對待。

做個實驗，如果刪除子Component里的@Input：

最后什么也無法顯示出來：

最后效果：

parent：

加上中括號之后，需要傳入一個 Component 屬性的路徑。

結果：

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的Angular input decorator学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。