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. |
使用说明
你可以提供一个可选的仅供模板中使用的名字，在组件实例化时，会把这个名字映射到可绑定属性上。 默认情况下，输入绑定的名字就是这个可绑定属性的原始名称。
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 {}
