Angular2 свойство изменения динамического изменения CSS

Мы создаем приложение Angular2, и мы хотим иметь возможность каким-то образом создать глобальную переменную CSS (и обновлять значения свойств, когда они изменяются при назначении переменной).

Мы использовали Polymer некоторое время (теперь мы переходим на компоненты Angular2), и мы использовали свойства CSS (у Polymer есть polyfill), и мы только что обновили стили, используя Polymer.updateStyles().

Есть ли способ, которым мы можем достичь аналогичной функции?

EDIT:

Мы хотим нечто похожее на Sass color: $g-main-color или на пользовательские свойства CSS color: var(--g-main-color) и всякий раз, когда мы решаем изменить значение свойства, например. что-то вроде updateVariable('g-main-color', '#112a4f'), динамически обновляющее значение везде. Все это при запуске приложения.

ИЗМЕНИТЬ 2:

Я хочу использовать некоторые глобальные переменные CSS в разных частях (хост, дочерний элемент...) моего CSS и иметь возможность немедленно изменять значение, поэтому, если я изменяю переменную цвета, она меняется везде в приложении.

Я буду использовать синтаксис 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 }} }

Ответ 1

Просто используйте стандартные переменные 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");

Ответ 2

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

Ответ 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.

Надеюсь, это то, что вы имели в виду.

Этот пример берется для учебника здесь.

Ответ 4

Я сделал этот плункер, чтобы изучить один из способов сделать то, что вы хотите.

Здесь я получаю 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 {}

Ответ 5

Angular 6 + Alyle UI

С 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 Repository