Angular2动态更改CSS属性

Question 1

我们正在制作一个Angular2应用程序，我们希望能够以某种方式创建一个全局CSS变量（并在分配变量时每当更改时更新属性的值）。

我们使用Polymer已有一段时间（现在我们要切换到Angular2组件），并且使用CSS属性（Polymer具有一些polyfill），并且仅使用来更新样式Polymer.updateStyles()。

有什么方法可以实现类似的功能？

编辑：

我们想要类似于Sasscolor: $g-main-color或CSS自定义属性的东西，color: var(--g-main-color)并且每当我们决定更改属性的值时（例如，类似updateVariable('g-main-color', '#112a4f')它的东西都会在任何地方动态更新值）。应用运行时的所有情况。

编辑2：

我想在CSS的不同部分（主机，子元素...）中使用一些全局CSS变量，并能够立即更改该值-因此，如果我更改my-color变量，它将在应用程序中随处更改。

我将使用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 }} }

Question 2

只需使用标准CSS变量：

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

body {
  --my-var: #000
}

在组件的css或其他内容中：

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

然后，可以通过将内联样式设置为html元素，直接使用TS / JS更改变量的值：

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

否则，您可以使用jQuery：

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

Question 3

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

Question 4

您没有任何示例代码，但我想您想做这样的事情？

@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属性进行相同的思考。

我希望这就是你的意思。

此示例是此处出色的Egghead教程的示例。

Question 5

我做了这个小伙子，探索一种做自己想要的方法。

在这里，我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 {}

Question 6

Angular 6 + Alyle用户界面

借助Alyle UI，您可以动态更改样式

这是一个演示堆栈闪电战

@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仓库