角4用户定义的主题

Question

我有一个应用程序，用户选择4种颜色：

1. 品牌
2. 重音
3. 对比
4. 重音灯

这些数据存储在用户记录中，当用户登录时，我将检索和缓存这些数据。

我一直在寻找一种方法来用这些样式在全球范围内对应用程序进行主题化。例如h1 - h3标签有一个边框底部：$brand；

我看过一些类似的解决方案，但它们都遵循相同的预定义主题概念。

Angular2: Update all color assignments in CSS dynamically

如何在整个应用程序中全局使用用户颜色？

Answer 1

如果没有太多的差异(或使用SASS)和一些主题

<div [ngClass]="theme">
 <h1>Hello word</h1>
 <router-oulet><router-oulet>
</div>

vendor.css中的css或app.module.css中的css如果组件具有封装: ViewEncapsulation.None，

.Brand h1
{
    color:red;
}
.Accent h1
{
   color:blue
}

然后在app.component.ts中分配主题变量

Answer 2

您可以尝试使用javascript函数https://plnkr.co/edit/b2kAztHntMuNjTfOv8jD?p=preview (它不是我的)

在.js中

var myJavaCall = (function() {

  return {
    func1: function(saludo) {
      alert(saludo+' function 1 called');
    }
  }

})(myJavaCall ||{})

然后，在你的component.ts

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import 'external.js'

declare var myJavaCall: any;

export myComponent{
  ...I can use myJavaCall.func1('Hello world') ...

}

是的，您必须寻找更改或导入css的javascript方式。