Question

对于给定的js变量，其中包含样式信息：

menuBgColor = "red";

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

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

在Angular2 +中我不能使用与上面相同的内容。在浏览器中呈现视图时，不会填充变量menuBgColor，并且元素将呈现为已编码。

像这样 -

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

我想知道在角度2+中为视图添加动态样式的其他方法是什么？

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

非常感谢任何帮助。

Answer 1

你可以试试这个：

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

在这种情况下，绑定应该起作用

Answer 2

如果没有像Angular Material那样构建一个巨大的结构，那么没有办法做到这一点。但是，如果你的主题系统不是那么复杂，我只需要动态地将<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

Angular 2+动态生成css

2 个答案: