动态切换 Angular8 应用程序的全局 CSS(客户端品牌)

Question

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

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

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

目录：

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

TS：

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

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

我也没有动力修复我的解决方法，因为它只是解决方法。相反，我想实现一些全局工作的东西，没有任何每个组件的样板。

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

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

client_style.css对每个客户的服务方式不同。

Answer 1

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

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

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 规则的合理性。