填写这份《一分钟调查》,帮我们(开发组)做得更好!去填写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
      
      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 {}
      
      @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 {}