角2+动态地生成的CSS

对于一个给定的js变量，其具有在它的样式信息：角2+动态地生成的CSS

menuBgColor = "red";

在AngularJS我能够使用动态地嵌入样式：

<div> 
    <style> 
     .menuElement{ 
     background-color:{{menuBgColor}} 
     } 
    </style> 
    <div class="menuElement">...</div> 
</div>

在Angular2 + I不能像上面那样使用。当视图在浏览器变量中呈现时menuBgColor未被填充，并且元素呈现为编码。

这样的 -

<body> 
...other markup... 
<div><style>.menuElement{background-color:{{menuBgColor}}}</style> 
...markup... 
</body>

我想知道什么是角2+等方式来动态样式添加到视图？

我知道ngStyle，但给出的例子是一个非常小的例子。
对我而言，我必须将动态样式应用于整个应用程序的每个元素，例如按钮，边框，背景，颜色，树控件，侧边栏等等。所以ngStyle非常详尽。
我也没有预定义的主题文件，因为主题是由我们的应用程序中的一个功能管理的，用户可以在其中定义他/她自己的主题。这里据我所知，我可以刷新页面以获取更新的主题，但考虑到可能有'n'个用户拥有自己的主题。
所以在我的使用案例中，我能想到的唯一解决方案是以某种方式变量插值并创建嵌入式CSS。

任何帮助，非常感谢。

来源

2017-12-18 Ashwin

是吧'menuBgColor'或'菜单。 bgColor'？ –

更正，它是'menuBgColor' – Ashwin

像SASS/SCSS的CSS预处理器呢？ –

你可以试试这个：

<div [style.background-color]="yourVar"></div>

在这种情况下，应结合工作

来源

2017-12-18 12:15:31

好主意，我认为这将适用于很多情况。但是如果有人想要在伪元素上设置样式呢？ OP还提到（并驳斥）了ngStyle。 –

好，但有很多元素风格。将样式添加到大约1000个元素是详尽无遗的。 – Ashwin

有没有漂亮的方式做到这一点无需建立庞大的结构是怎样的角材料不会。但是，如果你的主题系统不是很复杂，我会简单地用动态渲染<link>标记你的主题，像这样走：

import { Component } from '@angular/core' 
import { DomSanitizer } from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <link rel="stylesheet" [href]="getThemeUrl()"> 
    <div class="main"> 
     {{'themes/css/'+ theme +'.css' }} 

     <select [(ngModel)]="theme" (change)="onThemeChanged(theme)"> 
      <option value="red">Red</option> 
      <option value="blue">Blue</option> 
      <option value="yellow">Yellow</option> 
     </select> 
    </div> 
    ` 
}) 
export class AppComponent { 
    theme = 'red'; 

    constructor(public sanitizer: DomSanitizer){} 

    getThemeUrl(){ 
     return this.sanitizer 
      .bypassSecurityTrustResourceUrl('themes/' + this.theme + '.css'); 
    } 
}

Plunkr

来源

2017-12-18 12:19:03

它完美的工作，但只有一个问题是，每个UI交互重新请求CSS文件。任何方式来避免这种情况？ – Ashwin

@Ashwin也许如果你使用'[href] =''/ themes/css /'+ theme +'.min.css''' –

@Ashwin是否解决了这个问题？ –

角2+动态地生成的CSS

回答

相关问题