Angular2 動態更改 CSS 屬性

Question

我們正在制作一個Angular2 應用程序，我們希望能夠以某種方式創建一個全局 CSS 變量（並在分配變量時更新屬性值）。

我們已經使用 Polymer 一段時間了（現在我們正在切換到 Angular2 組件）並且我們使用了 CSS 屬性（Polymer 有一些 polyfill）並且我們剛剛使用Polymer.updateStyles()更新樣式。

有什么辦法可以實現類似的功能嗎？

編輯：

我們想要類似於 Sass color: $g-main-color或 CSS 自定義屬性color: var(--g-main-color)並且每當我們決定更改屬性的值時，例如像updateVariable('g-main-color', '#112a4f')它動態地更新無處不在的值。 所有這一切都在應用程序運行時。

編輯2：

我想在我的 CSS 的不同部分（主機、子元素...）使用一些全局 CSS 變量，並且能夠立即更改該值 - 所以如果我更改 my-color 變量，它會在 app.js 中的任何地方更改。

例如，我將使用 Sass 語法：

:host { border: 2px solid $my-color }
:host .some-label { color: $my-color }

是否可以使用 Angular 管道之類的東西？ （但據說它只適用於 HTML）

:host { border: 2px solid {{ 'my-color' | cssvariable }} }
:host .some-label { color: {{ 'my-color' | cssvariable }} }

Answer 1

1) 使用內聯樣式

<div [style.color]="myDynamicColor">

2）使用多個CSS類映射到你想要的並切換類，如：

 /* CSS */
 .theme { /* any shared styles */ }
 .theme.blue { color: blue; }
 .theme.red { color: red; }

 /* Template */
 <div class="theme" [ngClass]="{blue: isBlue, red: isRed}">
 <div class="theme" [class.blue]="isBlue">

代碼示例來自： https : //angular.io/cheatsheet

有關 ngClass 指令的更多信息： https ://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

Answer 2

只需使用標准 CSS 變量：

您的全局 css（例如：styles.css）

body {
  --my-var: #000
}

在您組件的 css 或其他任何內容中：

span {
  color: var(--my-var)
}

然后你可以直接用 TS/JS 通過將內聯樣式設置為 html 元素來更改變量的值：

document.querySelector("body").style.cssText = "--my-var: #000";

否則，您可以使用 jQuery：

$("body").css("--my-var", "#fff");

Answer 3

您沒有任何示例代碼，但我假設您想做這樣的事情？

@View({
directives: [NgClass],
styles: [`
    .${TodoModel.COMPLETED}  {
        text-decoration: line-through;
    }
    .${TodoModel.STARTED} {
        color: green;
    }
`],
template: `<div>
                <span [ng-class]="todo.status" >{{todo.title}}</span>
                <button (click)="todo.toggle()" >Toggle status</button>
            </div>`
})

您將ng-class分配給一個動態變量（您可以猜到，這是一個名為TodoModel的模型的屬性）。

todo.toggle()正在改變todo.status的值，並且輸入的類正在改變。

這是一個類名的例子，但實際上你可以對 css 屬性做同樣的思考。

我希望這就是你的意思。

此示例適用於此處的精彩蛋頭教程。

Answer 4

我做了這個 plunker來探索一種方法來做你想做的事。

在這里，我從父組件獲取mystyle ，但您可以從服務獲取它。

import {Component, View} from 'angular2/angular2'

@Component({
  selector: '[my-person]',
  inputs: [
    'name',
    'mystyle: customstyle'
  ],
  host: {
    '[style.backgroundColor]': 'mystyle.backgroundColor'
  }
})
@View({
  template: `My Person Component: {{ name }}`
})
export class Person {}

Answer 5

Angular 6 + Alyle 用戶界面

使用 Alyle UI，您可以動態更改樣式

這是一個演示 stackblitz

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    AlyleUIModule.forRoot(
      {
        name: 'myTheme',
        primary: {
          default: '#00bcd4'
        },
        accent: {
          default: '#ff4081'
        },
        scheme: 'myCustomScheme', // myCustomScheme from colorSchemes
        lightGreen: '#8bc34a',
        colorSchemes: {
          light: {
            myColor: 'teal',
          },
          dark: {
            myColor: '#FF923D'
          },
          myCustomScheme: {
            background: {
              primary: '#dde4e6',
            },
            text: {
              default: '#fff'
            },
            myColor: '#C362FF'
          }
        }
      }
    ),
    LyCommonModule, // for bg, color, raised and others
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

html

<div [className]="classes.card">dynamic style</div>
<p color="myColor">myColor</p>
<p bg="myColor">myColor</p>

對於改變風格

import { Component } from '@angular/core';
import { LyTheme } from '@alyle/ui';

@Component({ ... })
export class AppComponent  {
  classes = {
    card: this.theme.setStyle(
      'card', // key
      () => (
        // style
        `background-color: ${this.theme.palette.myColor};` +
        `position: relative;` +
        `margin: 1em;` +
        `text-align: center;`
         ...
      )
    )
  }
  constructor(
    public theme: LyTheme
  ) { }

  changeScheme() {
    const scheme = this.theme.palette.scheme === 'light' ?
    'dark' : this.theme.palette.scheme === 'dark' ?
    'myCustomScheme' : 'light';
    this.theme.setScheme(scheme);
  }
}

Github 存儲庫