一个具有不同品牌的通用 Angular 应用程序

Question

我目前正在开发一些 Angular 应用程序，其中要求之一是根据查询参数（不同租户不同品牌）动态更改背景图像、翻译等。所有资产都应放置在 Azure blob 存储中（它们是公共的，因此我拥有指向可用资产的所有链接 - 不需要使用 SAS）。由于我在前端没有太多经验，我想知道满足这些要求的最佳方法是什么。

我正在考虑为azure容器中的每个租户创建css并根据参数值加载它们。但我不确定是否可以在 Angular 中动态更改样式，也不确定这是否是最好的方法。

Answer 1

这个问题很难回答，而且可能含糊不清，但这里有一个可能的品牌架构。

您的应用程序需要在构建时考虑 css 标记，并且还需要考虑翻译标记。这些需要 2 种不同的解决方案，但对于 css，您可以使用 css 变量并标记您的应用程序。

例如，如果您有以下情况

:root {
    --main-bg-color: brown;
}

body {
    background-color: var(--main-bg-color); 
}

对于您的不同品牌，一旦您检索到相关颜色（在本示例中），您可以尝试在 javascript 中覆盖它，例如

// Get the root element
const root = document.documentElement;

// Update the --lightness value
root.style.setProperty('--main-bg-color', 'red');

---

阅读更多内容： css 变量 MDN