Angular：将数据传递给组件的最佳方式（对象与许多参数）答案

【问题标题】：Angular: Best way to pass data to a component (object vs many arguments)Angular：将数据传递给组件的最佳方式（对象与许多参数）
【发布时间】：2017-09-16 19:10:31
【问题描述】：

我想知道以下哪个更好

<my-component [data]="settings"></my-component>

或

<my-component 
    [bar]="settings.foo.bar"
    [baz]=settings.baz"></my-component>

然后设置对象将如下所示

this.settings = {
    foo: { bar: 10 }
    baz: 2
};

第一种形式很紧凑，但不太明确my-component 需要什么。我可以想象在某些情况下，将整个对象传递给组件可能会更好（例如，如果属性太多）。那么性能呢。我可以想象，如果您绕过整个对象，更改检测会更难且性能更低。任何有关此主题的帮助/提示将不胜感激！

【问题讨论】：

Refactoring Angular components from many inputs/outputs to a single config object的可能重复

标签： angular angular-components

【解决方案1】：

更好的选择是第一。 HTML代码更简洁，当有人需要找出什么是设置，然后跳转到ts文件没有问题。打字稿类型是识别对象的好方法，因此您不需要单独传递属性。

【讨论】：

【解决方案2】：

我认为指定单个值是一种更好的方法。正如您所写，它更明确地说明了您的需求，您可以指定其他来源的值（不仅仅是设置对象）。这样，更改检测很容易，您的组件可以通过使用来优化

@Component({  
  changeDetection: ChangeDetectionStrategy.OnPush
})

使用OnPush 策略，如果组件的输入值都没有更改，Angular 将跳过对组件子树的更改检测。

更多信息见

【讨论】：

【解决方案3】：

就我的经验而言，当今前端软件开发的首要任务应该是代码的可读性。就性能而言，差异可以忽略不计，我会选择第一个选项，您可以清楚地传递一个 settings 对象。阅读 .html 页面时，没有兴趣在这里进一步挖掘； “读者”可以在脚本的其他地方看到变量的结构。

【讨论】：