使用ES6扩散操作符传递道具

Question

ChildComponent.ts

export class ChildComponent implements OnInit {
  @Input() name?: string;
  @Input() email?: string;
  // A lot more props

  constructor() {}

  ngOnInit(): void {}
}

ParentComponent.ts

export class ParentComponent implements OnInit {
  childProps = {
    name: "johnny",
    email: "johnny@gmail.com"
  };

  constructor() {}    
  ngOnInit(): void {}
}

ParentComponent.html

这是可行的：

<app-child [name]="childProps.name" [email]="childProps.email"></app-child>

但是我如何使用ES6传播运算符传递所有道具呢？

<app-child [*]="{...childProps}"></app-child>

Answer 1

你可以考虑为道具定义一个接口，然后作为一个对象传递，不需要传播或使用多个@Inputs()。

// child.ts

export interface ChildProps {
  name?: string,
  email?: string  ​
}

export class ChildComponent implements OnInit {
 ​@Input() allProps?: ChildProps;
​
 ​constructor() {}

 ​ngOnInit(): void {}
}

//parent.ts

export class ParentComponent implements OnInit {
  childProps = {
    name: "johnny",
    email: "johnny@gmail.com"
  };

  constructor() {}    
  ngOnInit(): void {}
}

<!-- parent-template.html -->

<app-child [allProps]="childProps"></app-child>

<!-- child-template.html -->

<div>{{ allProps?.name }}</div>