Angular2 Dynamic Change CSS-Eigenschaft

Wir erstellen eine Angular2-Anwendung und möchten in der Lage sein, eine globale CSS-Variable zu erstellen (und die Werte der Eigenschaften zu aktualisieren, wenn sie geändert werden, wenn die Variable zugewiesen wird).

Wir hatten Polymer für eine Weile verwendet (jetzt wechseln wir zu Angular2-Komponenten) und wir hatten CSS-Eigenschaften verwendet (Polymer hat einige Polyfills) und wir hatten nur Stile mit aktualisiert Polymer.updateStyles().

Gibt es eine Möglichkeit, eine ähnliche Funktion zu erreichen?

BEARBEITEN:

Wir möchten etwas Ähnliches wie Sass color: $g-main-coloroder benutzerdefinierte CSS-Eigenschaften color: var(--g-main-color)und wann immer wir uns entscheiden, den Wert der Eigenschaft zu ändern, z. B. etwas Ähnliches updateVariable('g-main-color', '#112a4f'), das den Wert überall dynamisch aktualisiert. All das, während eine App läuft.

EDIT 2:

Ich möchte einige globale CSS-Variablen in verschiedenen Teilen (Host, untergeordnetes Element ...) meines CSS verwenden und den Wert sofort ändern können. Wenn ich also meine Farbvariable ändere, ändert sich dies überall in der App.

Ich werde zum Beispiel die Sass-Syntax verwenden:

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

Ist es möglich, so etwas wie Winkelrohre zu verwenden? (Aber es funktioniert angeblich nur in HTML)

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

Verwenden Sie einfach Standard-CSS-Variablen:

Ihr globales CSS (zB: styles.css)

body {
  --my-var: #000
}

In der CSS Ihrer Komponente oder was auch immer es ist:

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

Anschließend können Sie den Wert der Variablen direkt mit TS / JS ändern, indem Sie den Inline-Stil auf das HTML-Element setzen:

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

Andernfalls können Sie jQuery dafür verwenden:

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

1) Verwenden von Inline-Stilen

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

2) Verwenden Sie mehrere CSS-Klassen, die Ihren Wünschen zugeordnet sind, und wechseln Sie die Klassen wie folgt:

 /* 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">

Codebeispiele von: https://angular.io/cheatsheet

Weitere Informationen zur ngClass-Direktive: https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

Sie haben keinen Beispielcode, aber ich nehme an, Sie möchten so etwas tun?

@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>`
})

Sie weisen ng-classeine Variable zu, die dynamisch ist (eine Eigenschaft eines Modells, die, TodoModelwie Sie sich vorstellen können, aufgerufen wird ).

todo.toggle()ändert den Wert von todo.statusund dort ändert sich für die Klasse der Eingabe.

Dies ist ein Beispiel für den Klassennamen, aber Sie können das gleiche für CSS-Eigenschaften tun.

Ich hoffe das hast du gemeint.

Dieses Beispiel ist für das großartige Egghead-Tutorial hier genommen .

Ich habe diesen Plunker gemacht , um einen Weg zu finden, um das zu tun, was Sie wollen.

Hier bekomme ich mystylevon der übergeordneten Komponente, aber Sie können es von einem Dienst bekommen.

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 {}

Angular 6 + Alyle UI

Mit der Alyle-Benutzeroberfläche können Sie die Stile dynamisch ändern

Hier ein Demo 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>

Zum Ändern des Stils

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 Repository