使用 ES6 扩展运算符传递道具答案

【问题标题】：Pass props using ES6 spread operator使用 ES6 扩展运算符传递道具
【发布时间】：2021-07-28 08:50:16
【问题描述】：

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>

【问题讨论】：

Angular template syntax 不支持。
嗯...大多数其他 Web 框架都支持这一点
我并不是说他们没有，只是 Angular 没有。参见例如stackoverflow.com/q/47297089/3001761，stackoverflow.com/q/58116963/3001761，stackoverflow.com/q/53845004/3001761。另请注意，AngularJS 完全是一个不同的框架。
谢谢@jonrsharpe

标签： angular typescript

【解决方案1】：

你可以考虑为props定义一个接口，然后作为一个对象传递，不需要传播或使用多个@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>

【讨论】：