web-dev-qa-db-ja.com

Angular 2の動的変更CSSプロパティ

Angular 2アプリケーションを作成していて、グローバルCSS変数を何らかの方法で作成できるようにしたい（そして変数が割り当てられたときに変更されたときはいつでもプロパティの値を更新したい）。

しばらくの間Polymerを使用し（現在はAngular 2コンポーネントに切り替えています）、CSSプロパティを使用し（Polymerにはいくつかのpolyfillがあります）、Polymer.updateStyles().を使用してスタイルを更新しました

どうやって同じような機能を実現できるのでしょうか。

編集：

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 }} }
javascriptangulardartangular-dart
68
tenhobi

標準のCSS変数を使うだけです

あなたのグローバルなCSS（例：styles.css）

body {
  --my-var: #000
}

あなたのコンポーネントのCSSではoそれは何でも。

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

その後、インラインスタイルをhtml要素に設定することで、TS/JSを使用して変数の値を直接変更できます。

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

それ以外の場合は、jQueryを使用できます。

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

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

64
Gerard Sans

サンプルコードはありませんが、このようなことをしたいと思いますか。

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

動的な変数（TodoModelというモデルのプロパティ）にng-classを代入します。

todo.toggle()はtodo.statusの値を変更していて、そこで入力のクラスが変更されています。

これはクラス名の例ですが、実際にはCSSプロパティについても同じことができます。

私はこれがあなたが意味することを願っています。

この例は素晴らしいeggheadチュートリアル ここ のために取られたものです。

5
Shikloshi

私は この略奪者 あなたが望むことをする一つの方法を探求するためにしました。

ここでは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 {}
2
bertrandg