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

Question

我想根据正在连接的客户端动态切换 Angular 的全局 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 对每个客户的服务不同。

Answer 1

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

首先，我向 SessionDataService 添加了一个 clientCode String 字段，这是我用来在我的应用程序周围移动 component-agnostic 数据的全球服务：

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>

所以在这一点上，我创建了一个动态添加 client-code CSS 类到我的组件的系统，包括所有子组件:)

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

.ClientOne p {
  color: red;
}

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

.ClientTwo.dashboard {
  height: 15%;
}

希望对大家有所帮助！本质上，这里的 "trick" 是添加一个包装整个应用程序的 ngClass，然后用它们的客户端代码证明所有 client-specific CSS 规则。

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

Dynamically switch global CSS for Angular8 app (client branding)

css

dynamic

angular8