填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

Input

一個裝飾器,用來把某個類別欄位標記為輸入屬性,並提供配置元資料。 該輸入屬性會繫結到範本中的某個 DOM 屬性。當變更檢測時,Angular 會自動使用這個 DOM 屬性的值來更新此資料屬性。

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.

選項說明
bindingPropertyName?

輸入屬性繫結到的 DOM 屬性的名字,

The name of the DOM property to which the input property is bound.

參見

選項

輸入屬性繫結到的 DOM 屬性的名字,

The name of the DOM property to which the input property is bound.

      
      bindingPropertyName?: string
    

使用說明

你可以提供一個可選的僅供範本中使用的名字,在元件實例化時,會把這個名字對映到可繫結屬性上。 預設情況下,輸入繫結的名字就是這個可繫結屬性的原始名稱。

You can supply an optional name to use in templates when the component is instantiated, that maps to the name of the bound property. By default, the original name of the bound property is used for input binding.

下面的例子建立了一個帶有兩個輸入屬性的元件,其中一個還指定了繫結名。

The following example creates a component with two input properties, one of which is given a special binding name.

      
      @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 Angular
  normalizedBankName: string;
}

@Component({
  selector: 'app',
  template: `
    <bank-account bankName="RBC" account-id="4747"></bank-account>
  `
})
class App {}