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

我们正在开发SaaS应用程序，目前面临着不同客户要求不同定制的情况。我已经在谷歌上搜索并阅读了很多关于这方面的专门文章。我也很熟悉

但是这仍然让我对Angular 2+应用程序的一个好概念感到困惑。业务逻辑不会成为问题，因为我可以使用Angular的依赖注入为不同的客户加载和使用定制服务。此外，主题本身并不是一个问题，因为我们使用了一个很好的主题引擎内置。让我头疼的是模板本身。当然，我可以在HTML模板中使用

*ngIf

和

*ngSwitch

，但这正是我想要避免的代码类型，因为一旦达到50多个客户版本，它将变得可怕

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

对于这个场景，我能想到的三个选项（我真的不喜欢其中任何一个）如下所示：

如前所述，使用

*ngIf

和/或

*ngSwitch*

使用角度材质的主题功能并仅使用css（

display:none；

）

维护组件的多个版本（取决于使用组件继承的需要），并根据用户加载正确版本的组件

他们都有明显的缺点，仅举几个例子：

一旦客户数量增加，定制变得更加频繁，就需要进行维护（想想一个更大的组件，它有6个差异，50个客户…）

现在实际上我最喜欢的功能，但没有真正禁用，只是隐藏了（当然后端会检查权限，但仍会根据需要将更多信息传输给用户）

对于组件的代码部分来说效果很好，但这意味着要维护大量重复的模板代码

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

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

---

因此，我们的方法是扩展现有的许可数据库，使其也包含特定于客户的功能，显然，只有该客户才拥有许可证。现在，简单的解决方案是拥有一个许可证端点并获得客户已获得的所有许可证，然后每个可选功能都可以放在一个简单的

*ngIf

中。我很欣赏这是一个简单而干净的解决方案，但它提供了了解我们公司其他客户的一些业务事实的可能性（通过不混淆代码和查找其他端点等）。因此，将其与服务器端渲染相结合可能是我目前能想到的最佳解决方案。

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

将页面划分为充当容器区域的组件

为每个客户创建一个客户配置，其中 每个区域都有哪些原子成分

创建原子组件，其中每个组件都可以是与其他组件隔离的单个功能。更多地依赖服务来实现它们之间的通信。该原子组件的一个示例是在示例中创建新导出的按钮

使用ComponentFactory动态创建页面

我以前也使用过同样的方法，基于幻灯片模板（如powerpoint幻灯片模板）自定义设计工具箱

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

*ngIf和*ngSwitch，如果您动态创建您的组件并使用粒度或原子组件，则可以消除这些问题

我不认为这是架构方面的一个好方法 和设计。您只是在操纵视图css

如果您使用transclustion，如果您 能够有效地对组件进行分组

---

我希望这能有所帮助。

你好，Sameh！谢谢你的回答。我从中得到了一些灵感来编辑我的问题。基本上，您的答案是它的基础，拥有一个配置（或授权数据库）并使用原子组件。我已经投了赞成票，但在接受之前，我会等待更多的答案。干杯