Angular2动态风格

Question

动态样式呢？

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

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

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

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

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

您有任何框架或其他解决方案吗？

Answer 1

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

组件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()
    }
}