如何在Angular中使用对象绑定组件的多个属性？

Vue中的实现 #

<Person v-bind='{name: "Tom", color: "Blue"}'></Person>

React中的实现 #

<Person {...{name: "Tom", color: "Blue"}}></Person>

Angular中如何实现相同效果？ #

更新说明

Person组件定义了两个输入属性，需要将一个对象快速绑定到该组件：

数据示例：

const it = {name: "Tom", color: "Blue"}

Person组件代码：

@Component({
  templateUrl: './person.component.html'
})
export class PersonComponent {
    @Input() name: string;
    @Input() color: string;
}

Angular的解决方案

如果你的Angular版本在14及以上，可以直接使用Angular新增的输入属性展开语法，和Vue/React的写法逻辑一致，直接将对象展开绑定到组件：

<Person [...]="it" />

如果是Angular 14以下的版本，只能逐个绑定对象属性到组件输入：

<Person [name]="it.name" [color]="it.color" />

内容的提问来源于stack exchange，提问作者scccboom