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

时间:2018-07-09 09:29:11

标签: angular reactjs typescript mvvm

为了最小化团队的工作量,我创建了几个模块,并准备在NPM上以私有软件包的形式发布在我们的组织帐户中。

这些软件包提供了一种轻松的方法来按照我们公司的品牌指南呈现模板。

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

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

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

  1. 角材料2(角)
  2. Atlassian UI Kit(反应式)
  3. 蚂蚁设计(反应式)
  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使用此方法

这是问题所在, 通过应用程序传递数据的正确方法是什么? 或者,我应该同时允许两种方法并由开发人员做出选择吗?

1 个答案:

答案 0 :(得分:3)

我个人会使用config方法,因为它可以轻松使用,并且可以在将来添加更多配置属性的情况下使组件面向未来。

这也使它更具可读性。

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