Question

动态样式怎么样。

想象一下，您正在为多个客户端部署一个独特的plaftorm。（SAAS平台）

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

在角度2中，有scss但是scss是编译语言 - ＆gt;所以你需要为每个客户编译每次编译N个webapps。这需要时间并且难以维护。

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

但我认为它是带有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()
    }
}

Angular2动态风格

1 个答案: