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

Question

在 Vue 中

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

在反应中

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

在角度？

更新

Person 组件有 2 个输入属性。如何快速绑定一个对象到这个组件？

数据是

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

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

<Person ???="it" />

Answer 1

你的 Person 组件

  name: string;
  color: string;
  @Input('personData') set _person({ name, color }: { name: string; color: string }) {
    this.name = name;
    this.color = color;
  }

你的主要组件

 <app-person [personData]="{name: 'Tom', color: 'Blue'}"></app-person>

注意：（您可以选择使用

Input('your input') whatever(..)

或

@Input()yourInput(..){}

Answer 2

可以使用接口数据模型来处理这个

人物细节成分

@Component({
      selector: 'person-detail',
      template: `
      <div>Name : {{person.name}} </div>
      <div>Color : {{person.color}}</div>
      `,
    })
    export class PersonComponent {
      @Input() person: Person;
    }

人机界面

export interface Person {
  name: string;
  color: string;
}

你可以像这样调用组件

<person-detail
  [person]="{ name: 'Testing User', color: 'black' }"
></person-detail>