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

Question

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

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

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

我可以为这种情况考虑的三个选项（我都不喜欢）如下：

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

所有这些都有明显的结论，仅举几例：

1. 一旦客户数量增加并且定制化变得更加频繁，就要保持梦魇（想想6个差异化和50个客户的更大组件......）
2. 现在实际上是我最喜欢的，但功能并没有真正禁用，只是隐藏（当然后端检查权限，但仍有更多信息转移给用户然后必要）
3. 适用于组件的代码部分，但意味着要维护大量的重复模板代码

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

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

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

Answer 1

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

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

我之前使用相同的方法来定制基于幻灯片模板的设计工具箱（如powerpoint幻灯片模板）。

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

1. * ngIf和* ngSwitch，如果您动态创建ur组件并使用粒度或原子组件，则可以消除这些。
2. 我不认为这在建筑方面是一个很好的方法 和设计。你只是在操纵视图css
3. 如果您使用transclustion，这可以最大限度地减少您的代码库 可以有效地对组件进行分组。

我希望这会有所帮助。