角2+动态地生成的CSS

  • Z时代
  • 2024-01-10
  • 分类：问答

对于一个给定的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。

任何帮助，非常感谢。

回答：

你可以试试这个：

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

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

回答：

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

以上是 角2+动态地生成的CSS 的全部内容， 来源链接： utcz.com/qa/263161.html

回到顶部