在 Angular 应用中,@Input() 装饰器用于在组件上注入输入属性。在使用多个输入属性时,一种常见的方法是使用多个 @Input() 装饰器。
示例代码如下:
@Component({
selector: 'my-component',
template:
})
export class MyComponent {
@Input() name: string;
@Input() age: number;
}Hello {{name}}!
通过上面的代码,可以看出 MyComponent 组件有两个输入属性:name 和 age。
然而,也可以使用单个 @Input() 装饰器来定义多个输入属性,如下所示:
@Component({
selector: 'my-component',
template:
})
export class MyComponent {
@Input('myInput') myProps: { name: string, age: number };
}Hello {{name}}!
上面的代码将所有的输入属性打包成一个 myProps 对象,可以通过属性的方式来访问每一个输入属性。
虽然使用单个 @Input() 装饰器比多个装饰器更简单,但是对于只有一个输入属性的组件,保持一个 @Input() 装饰器更加清晰。