为 Angular8 应用程序动态切换全局 CSS（客户端品牌）答案

【问题标题】：Dynamically switch global CSS for Angular8 app (client branding)为 Angular8 应用程序动态切换全局 CSS（客户端品牌）
【发布时间】：2019-12-01 20:13:03
【问题描述】：

我想根据正在连接的客户端动态切换 Angulars 全局 CSS 文件。这将用于客户品牌化目的，包括字体、颜色、照片、页眉、页脚、按钮样式等。

每个客户都为我们提供了一个 CSS 文件，我们需要将其集成到我们的应用中。我们有数百个客户。

当前的解决方案是尝试在加载时覆盖单个组件的 CSS。这很糟糕，因为它添加了很多样板：

HTML：

<link id="theme" rel="stylesheet" href="./assets/stylesheets/{{cclientCode}}.css">

ts：

ngOnInit() {
    this.service.clientCode.subscribe(clientCode => this.clientCode = clientCode);
  }

我的解决方法不起作用，因为在 {{}} 有机会加载值之前调用了 link html。

我也没有动力修复我的解决方法，因为它只是一种解决方法。相反，我想实现一些在全球范围内有效的东西，而不需要任何每个组件的样板。

我想要的是能够为每个客户端动态切换 global Angular 样式。所以像：

"styles": [
              "src/assets/stylesheets/angular_style.css",
              "src/assets/stylesheets/client_style.css"
]

client_style.css 以不同方式提供给每个客户端。

【问题讨论】：

标签： css dynamic angular8

【解决方案1】：

我找到了一个我认为可行的解决方案。不过肯定有问题，所以如果有人有自己的答案，请仍然分享！

首先，我在 SessionDataService 中添加了一个 clientCode 字符串字段，这是我用来在我的应用中移动与组件无关的数据的全局服务：

export class SessionDataService {
  clientCode: BehaviorSubject<String>;

  constructor(){
    this.clientCode = new BehaviorSubject('client_default');
  }

  setClientCode(value: String) {
    this.clientCode.next(value);
  }
}

然后，在 app.component.ts 中，我添加了一个 BehaviorSubject 监听器来动态引入 clientCode 的值：

  public clientCode: String;
  constructor(private service : SessionDataService) {
    this.service.clientCode.subscribe(clientCode => this.clientCode = clientCode);
  }

接下来，我在整个 app.component.html 周围添加了一个包装器：

<div [ngClass]="clientCode">
--> ALL app components go here (including <router-outlet>)
</div>

所以此时，我已经创建了一个系统，可以将客户端代码 CSS 类动态添加到我的组件中，包括所有子组件：)

最后，我只需要编写 CSS 规则：

.ClientOne p {
  color: red;
}

.ClientOne .btn {
  background-color: red;
}

.ClientTwo.dashboard {
  height: 15%;
}

我希望这对某人有所帮助！本质上，这里的“技巧”是添加一个包装整个应用程序的 ngClass，然后使用其客户端代码证明所有特定于客户端的 CSS 规则。

【讨论】：