Angular2 동적 변경 CSS 속성

Angular2 동적 변경 CSS 속성

---

우리는하고 있습니다 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 변수를 변경하면 앱의 모든 곳에서 변경됩니다.

예를 들어 Sass 구문을 사용합니다.

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

각도 파이프와 같은 것을 사용할 수 있습니까? (하지만 HTML에서만 작동합니다)

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

---

표준 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");

---

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

---

예제 코드는 없지만 이와 같은 작업을 원한다고 가정합니다.

@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 속성에 대해 동일한 생각을 할 수 있습니다.

이것이 당신이 의미하는 바가 있기를 바랍니다.

이 예제는 여기 에서 훌륭한 지식인 튜토리얼을 위해 가져 왔습니다 .

---

나는 당신이 원하는 것을하는 한 가지 방법을 탐구하기 위해이 플 런커 를했다.

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

---

Angular 6 + Alyle UI

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 저장소

참고 URL : https://stackoverflow.com/questions/33328347/angular2-dynamic-change-css-property