css - Angular2动态风格

Question

动态样式呢。

假设您正在为多个客户部署一个独特的平台。 (SAAS平台)

您部署了一个 webapp 文件夹，但这些 webapp 必须为每个客户端应用不同的主题(颜色)(示例配置:按域名加载颜色)。

在angular 2中，有scss但是scss是一种编译型语言->所以你需要每次为每个客户端编译N个webapps。这需要时间并且难以维护。

所以我看到的唯一解决方案是: - 在加载应用程序时在运行时(通过远程服务器调用、fe:jsass 或 js)编译 scss，并将生成的 css 文件注入(inject) head 部分。

但我认为它是 angular2 组件的 (s)css 文件的反模式。 此外，生成的文件将包含将应用于整个页面的组件样式，即使组件未初始化也是如此。

有没有框架或者其他解决方案？

Answer 1

您可以创建一个服务来实现此目的，该服务返回您想要更改的某些结构的颜色并将其注入(inject)组件

组件 html 中的示例:

<div [style.background-color]="themeService.getNavbarColor()"></div>

并在 App 启动并插入到 ThemeService 中时执行一些逻辑以获取每个用户的模式。

完整示例:

import { Component } from '@angular/core'

@Component ({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent {

    constructor( private themeService: ThemeService){}
}

@Injectable()
export class ThemeService {
    backgroundColor: string

    getNavbarBackgroundColor: string() {
        return this.backgroundColor;
    }

    someLogicToGetTheme() {
        //do stuff
    }

    ngOnInit() {
        this.someLogicToGetTheme()
    }
}