如何在 Angular 模板中设置多个道具？

Question

反应 JSX

<div {...props}></div>

Vue

<div v-bind="$props"></div>

Angular

// how to do?

Answer 1

您使用组件的 class 上的@Input()装饰器装饰属性

@Component({
  template: 'someHtml',
  selector: 'my-component'
})
class MyComponent() {
  @Input() prop1;
  @Input() prop2;
}

并使用属性绑定将它们设置在消费组件的模板中

<my-component [prop1]="someValue" [prop2]="anotherValue"></my-component>

Answer 2

如果 props 是一个数组，您可以使用 *ngFor 进行迭代

 <div *ngFor="let prop of props"> <p>{{prop}}</p> </div>