Input

选项说明
bindingPropertyName

一个装饰器,用来把某个类字段标记为输入属性,并且提供配置元数据。 声明一个可供数据绑定的输入属性,在变更检测期间,Angular 会自动更新它。

Decorator that marks a class field as an input property and supplies configuration metadata. Declares a data-bound input property, which Angular automatically updates during change detection.

选项

一个装饰器,用来把某个类字段标记为输入属性,并且提供配置元数据。 声明一个可供数据绑定的输入属性,在变更检测期间,Angular 会自动更新它。

Decorator that marks a class field as an input property and supplies configuration metadata. Declares a data-bound input property, which Angular automatically updates during change detection.

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 {}
      
      
  1. @Component({
  2. selector: 'bank-account',
  3. template: `
  4. Bank Name: {{bankName}}
  5. Account Id: {{id}}
  6. `
  7. })
  8. class BankAccount {
  9. // This property is bound using its original name.
  10. @Input() bankName: string;
  11. // this property value is bound to a different property name
  12. // when this component is instantiated in a template.
  13. @Input('account-id') id: string;
  14.  
  15. // this property is not bound, and is not automatically updated by Angular
  16. normalizedBankName: string;
  17. }
  18.  
  19. @Component({
  20. selector: 'app',
  21. template: `
  22. <bank-account bankName="RBC" account-id="4747"></bank-account>
  23. `
  24. })
  25.  
  26. class App {}