Question

我不确定编写Angular代码时哪种方法是最佳（或更好）的实践。我想提高代码质量时，能否给我一些建议？

例如，一个自定义元素的自定义列表：

<custom-list>
  <custom-item
    *ngFor="let obj of objects"
  ></custom-item>
</custom-list>

我应该这样处理custom-item内部的所有复杂性

<custom-list>
  <custom-item
    *ngFor="let obj of objects"
    [obj]="obj"
  ></custom-item>
</custom-list>

其中custom-item将obj映射到标签，颜色，布局等。或将其分布在许多@inputs()上，像这样吗？

<custom-list>
  <custom-item
    *ngFor="let obj of objects"
    [id]="obj.id"
    [label]="obj.label"
    [icon]="obj.icon"
    [color]="obj.color"
    [someProperty]="magicService.someProperty"
  ></custom-item>
</custom-list>

编辑：或仅传递ID属性并从存储服务获取每个custom-item中的所有相关数据？

我不确定是否应该保持界面苗条或组件简单而愚蠢。对于任何关于最佳实践的建议，我将不胜感激。

如果某些与渲染相关的属性是与项目相关或与列表相关的（例如，在边框之间的边框等），也会有所不同吗？

Answer 1

您绝对应该将整个对象传递给组件，因为：

组件驱动的编程背后的一般想法之一是使组件可重用。想象一下，如果您在几个地方使用该组件，应该添加一个新属性。您必须遍历代码中的所有位置，并确保在所有可能的位置将新参数作为Input提供。
如果“子”组件仅用于显示数据并具有一些简单的用户操作（例如，点击了按钮等），请尝试使其尽可能“哑”。通过从中获取依赖项数据的依赖性服务，您将为代码增加更多复杂性。

此外，您可以为输入使用更多详细的名称，例如item（或与组件上下文相关的任何选择）远胜于简单的obj。

Answer 2

如果父组件中已经有数据，则应将对象传递给子对象，而无需再次调用api。

我应该单独交付所有@inputs（）组件，还是仅交付ID /对象？

2 个答案: