html - 如何在 Angular 2 应用程序中处理不同的客户版本？

Question

我们正在开发一个 SaaS 应用程序，目前面临着不同客户要求不同定制的情况。我已经用谷歌搜索并阅读了很多关于 Multitenancy 的内容.我也熟悉 Strategy Pattern .

但是 这仍然让我对 Angular 2+ 应用程序的好概念有点困惑。业务逻辑不会成为问题，因为我可以使用 Angular 的依赖注入(inject)来为不同的客户加载和使用定制服务。主题本身也不是问题，因为我们使用 Angular Material它内置了一个不错的主题引擎。让我头疼的是模板本身。当然我可以在 HTML 模板中使用 *ngIf 和 *ngSwitch ，但这正是我要避免的代码，因为一旦达到 50 就会变得可怕+ 客户版本。

让我们举一个真实的例子。在搜索页面上，所有客户都可以搜索对象并将单个对象导出为文件下载。一位特定客户要求以专有文件格式实现批量导出，这需要在页面中添加一个新按钮，显然所有其他客户都不应该看到该按钮。

对于这种情况，我能想到的三个选项(我都不喜欢)如下:

1. 如前所述，使用 *ngIf 和/或 *ngSwitch*
在模板中工作
2. 使用 Angular Material 的主题功能并仅使用 css (display: none;)
3. 维护组件的多个版本(根据需要使用组件继承)并根据用户加载正确版本的组件

它们都有明显的缺点，仅举几例:

1. 一旦客户数量增长且定制变得更加频繁(考虑一个具有 6 种差异化和 50 个客户的更大的组件......)，维护的噩梦......)
2. 现在实际上是我最喜欢的，但功能并没有真正被禁用，只是被隐藏了(当然，后端会检查权限，但更多的信息会在必要时传输给用户)
3. 适用于组件的代码部分，但意味着要维护大量重复的模板代码

我相信我们不是第一个解决这个问题的人。我是否在监督任何缺点较少的解决方案？有没有我可以在这里应用的代码模式？

编辑:在我们公司进行更多讨论后，我们意识到还有一点很重要:一些客户托管在他们自己的服务器上，但大多数客户都由一台中央服务器提供服务。这意味着必须在运行时检测和添加可选功能，这意味着某种尴尬。

因此，我们的方法是扩展我们现有的许可数据库，以包含客户特定的功能，显然只有该客户拥有许可。现在简单的解决方案是拥有一个许可证端点并获得客户已获得的所有许可证，然后每个可选功能都可以放在一个简单的 *ngIf 中。我很欣赏这是一个简单而干净的解决方案，但它提供了找出我们公司其他客户的一些商业事实的潜力(通过取消混淆代码和寻找其他端点等)。因此，将其与服务器端渲染相结合可能是我现在能想到的最佳解决方案。

Answer 1

当然，我没有完全适合您的情况的明确解决方案，但这是一个想法。

1. 将您的页面划分为充当容器区域的组件。
2. 为每个客户创建一个客户配置，其中会说 哪些原子成分进入每个区域。
3. 创建原子组件，其中每个组件都可以是与其他组件隔离的单个功能。更多地依赖于服务来进行它们之间的通信。作为此原子组件的示例，在您的示例中创建新导出的按钮。
4. 使用 ComponentFactory 动态创建页面。

我之前使用相同的方法基于幻灯片模板(如 powerpoint 幻灯片模板)自定义设计工具箱。

至于你提到的选项，这是我的 2 美分:

1. *ngIf 和 *ngSwitch，如果您动态创建组件并使用粒度或原子组件，则可以消除这些。
2. 我不认为这在架构方面是个好方法 和设计。你只是在操纵 View css
3. 如果你使用嵌入，这可以最小化你的代码库，如果你 可以有效地对组件进行分组。

希望对您有所帮助。