Zmiana dynamiczna Angular2 Właściwość CSS

Question

Wykonujemy aplikację Angular2 i chcemy być w stanie w jakiś sposób utworzyć globalną zmienną CSS (i zaktualizować wartości właściwości, gdy tylko ulegną zmianie po przypisaniu zmiennej).

Przez jakiś czas używaliśmy Polymer (teraz przechodzimy na komponenty Angular2) i użyliśmy właściwości CSS (Polymer ma trochę polyfill) i właśnie zaktualizowaliśmy style za pomocą Polymer.updateStyles().

Czy istnieje sposób, w jaki możemy osiągnąć podobną funkcję?

EDIT:

Chcemy coś podobnego do Sass color: $g-main-color lub CSS właściwości niestandardowe color: var(--g-main-color) i gdy zdecydujemy się zmienić wartość właściwości, na przykład coś takiego jak updateVariable('g-main-color', '#112a4f') dynamicznie aktualizuje wartość wszędzie. Wszystko to, gdy aplikacja jest uruchomiona.

EDIT 2:

Chcę korzystać z niektórych globalnych zmiennych CSS w różnych częściach (host, element dziecko ...) mojego CSS i być w stanie natychmiast zmienić wartość - więc jeśli zmienię -kolor zmienia się wszędzie w aplikacji.

będę używał składni Sass na przykład:

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

można użyć czegoś podobnego rury kątowe? (ale to podobno działa tylko w HTML)

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

Answer 1

Wystarczy użyć standardowych zmiennych CSS:

globalnego css (np styles.css)

body { 
    --my-var: #000 
} 

w CSS O komponentu za cokolwiek to jest:

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

Następnie możesz zmienić wartość zmiennej bezpośrednio za pomocą TS/JS, ustawiając wbudowany styl w element html:

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

W przeciwnym wypadku można użyć jQuery do niego:

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

Answer 2

Nie ma żadnych przykładowy kod, ale zakładam, że chcesz zrobić coś takiego?

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

przypisać ng-class do zmiennej, która jest dynamiczna (właściwością modelu o nazwie TodoModel jak można się domyślić).

todo.toggle() zmienia wartość todo.status i tam zmienia się klasa wejścia.

To jest przykład dla nazwy klasy, ale w rzeczywistości można zrobić to samo myśl o właściwościach css.

Mam nadzieję, że o to ci chodziło.

Ten przykład jest zrobiony dla świetnego tutoriala z jajkiem here.

Answer 3

Zrobiłem this plunker, aby zbadać jeden sposób, aby zrobić to, co chcesz.

Tutaj otrzymuję mystyle z komponentu nadrzędnego, ale można pobrać z usługi.

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 4

1) Korzystanie inline style

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

2) Użyj wielokrotnego mapowania klas CSS, co chcesz i przełączanie klas jak:

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

próbek kodu z: https://angular.io/cheatsheet

Więcej informacji na temat dyrektywy ngClass: https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html