Angular2动态样式

动态样式怎么样？Angular2动态样式

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

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

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

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

但我认为这是一个与（角色）组件的（s）css文件的反模式。此外，即使未初始化组件，生成的文件也将包含将应用于整个页面的组件样式。

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

来源

2017-04-06 Jimmy Pannier

SCSS只编译一次（当你建立你的应用程序）到CSS文件。对于Typescript文件也是如此，编译并缩小为一个JS文件。 – YounesM

您应该创建一个自定义[RootRenderer]（https://angular.io/docs/ts/latest/api/core/index/RootRenderer-class.html），它将处理编译sass或使用自定义css文件。要做到这一点，您需要创建一个新的平台，这是我从未做过的重大任务。看看它是如何工作的[在浏览器平台]（https://github.com/angular/angular/blob/2.4.x/modules/%40angular/platform-browser/src/dom/dom_renderer.ts#L126）。并且在ng-europe – n00dl3

上有一个[关于自定义渲染器的演讲]（https://www.youtube.com/watch?v=iE-wYf4AaiM），我很高兴看到它。 –

你可以做到这一点创建返回要更改并注入到组件的组件的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() 
    } 
}

来源

2017-04-06 12:58:17 Cassiano

是的，但很遗憾必须在非风格文件中指定颜色。在Google Web Toolkit（GWT）世界中，您可以评估GSS文件中的值。我很惊讶没有相应的东西。 –

确实很可惜，但我不知道另一种方式来改变Angular上的CSS生产 – Cassiano

Angular2动态样式

回答

相关问题