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

Question

我想知道以下哪项更好

<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需要什么。我可以想象，在某些情况下，将整个对象传递给组件会更好（例如，如果有太多属性）。性能如何呢？如果你绕过整个物体，我可以想象变化检测更难，性能更差。任何有关此主题的帮助/提示将不胜感激！

Answer 1

我认为指定个别值是一种更好的方法。正如您所写，它更明确地说明您需要什么，并且您可以指定其他来源（不仅仅是设置对象）的值。这样，更改检测很容易，您可以使用

优化组件

@Component({  
  changeDetection: ChangeDetectionStrategy.OnPush
})

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

有关详细信息，请参阅

• https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html
• https://blog.thoughtram.io/angular/2017/02/02/making-your-angular-app-fast.html

Answer 2

就我的经验而言，今天前端软件开发的优先级应该是代码可读性。就性能而言，差异是可以忽略的，我会选择第一个选项，您可以清楚地传递一个settings对象。在阅读.html页面时，没有兴趣在这里进一步挖掘;读者＆＃39;可以在脚本中的其他位置查看变量的结构。

Answer 3

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