与应用程序组件中的包进行通信的正确方法是什么？

Question

为了最大程度地减少团队工作量，我创建了几个模块并准备在 NPM 上发布为我们组织帐户中的私有包。

这些包提供了一种按照我们公司品牌指南呈现模板的简单方法。

由于产品和团队的需求可能不同，包应该允许通过@Input()装饰器进行自定义数据绑定。

我不考虑使用Injectable Service 来共享数据，因为我认为是使用 Redux-like 还是使用共享服务由应用程序团队决定。

我花时间阅读以下内容以了解 UI 包如何正常接受数据输入，

1. 角材料2（角）
2. Atlassian UI 工具包（反应）
3. Ant 设计（反应）
4. NGX-Bootstrap（角度）

但是，在阅读它们之后，我很困惑我应该采用哪种方法进行数据绑定。

这是我想出的两种绑定数据的方法，

1。 一对一的数据绑定哪种格式，

<component-selector-a mode="_FromComponent" position="_FromComponent" presentation="_dataFromService">
</component-selector-a>

Angular Material2 使用这种方法

2。 直接传递对象，如，

const config: PackageAConfigInterface = {
    mode:  _mode,
    position:  _position,
    presentation:  _presentation,
}

<component-selector-a [config]="config"> </component-selector-a>

Atlassian UI Kit 使用这种方法

所以问题来了， 使应用程序传入数据的正确方法是什么？ 或者，我应该允许这两种方法并由开发人员决定选择吗？

Answer 1

就我个人而言，我会使用config 方法，因为它可以方便地使用，并且可以使组件经得起未来的考验，以防将来添加更多配置属性。

这也使它更具可读性。

另一件事，如果您有控制样式的输入，我会考虑完全删除它们，而是允许使用您的组件的每个产品从组件外部定义样式。如果有更多产品自己使用该组件，这也使将来更容易，因为当出现新用例时，您不必更新该组件。