web-dev-qa-db-ja.com

[ngClass]バインディングと[class]バインディングの違い

次のスニペット間のAngular 2の違いは何ですか：

<div [class.extra-sparkle]="isDelightful">
<div [ngClass]="{'extra-sparkle': isDelightful}">
angularsingle-page-applicationangular2-directivesangular-ng-class
31
Ben Taliadoros

これは特別なAngularバインディング構文

<div [class.extra-sparkle]="isDelightful">

これはAngularコンパイラの一部であり、このバインディングスタイルに従ってカスタムバインディングバリアントをビルドすることはできません。サポートされるのは[class.xxx]="..."、[style.xxx]="..."、および[attr.xxx]="..."

ngClassは通常のAngular自分でビルドできるようなディレクティブです

<div [ngClass]="{'extra-sparkle': isDelightful}">

ngClassはより強力です。クラスの文字列、文字列の配列、または例のようなオブジェクトをバインドできます。

29
Günter Zöchbauer

上記の2行のコードは、AngularのCSSクラスバインディングに関するものです。基本的に、CSSクラスをangularコンポーネントにバインドできる2〜3の方法があります。

テンプレートの括弧内にclass.classNameでクラス名を指定し、次に、クラスを適用するかどうかを決定するためにtrueまたはfalseに評価される右側の式を指定します。 extra-sparkle（key）はcssクラスであり、isDelightful（value）です。

<div [class.extra-sparkle]="isDelightful">

複数のクラスを追加する可能性がある場合、NgClassディレクティブが非常に便利です。 NgClassは、trueまたはfalseに評価されるキーおよび式としてクラス名を持つオブジェクトを受け取る必要があります。extra-sparkleはキーで、isDelightfulはvalue（boolean）です。

<div [ngClass]="{'extra-sparkle': isDelightful}">

今、余分な輝きとともに、あなたのdivも光らせることができます。

<div [ngClass]="{'extra-sparkle': isDelightful,'extra-glitter':isGlitter}">

または

export class AppComponent {
    isDelightful: boolean = true;
    isGlitter:  boolean = true;

     sparkleGlitter()
    {
        let classes = {
            extra-sparkle: this.isDelightful,
            extra-glitter: this.isGlitter
        };
        return classes;
    }
}

<div [ngClass]='sparkleGlitter()'>

NgClassの場合、条件付き三項演算子も使用できます。

10
Hameed Syed

[ngClass]を使用すると、本当に便利な方法で複数のクラスを適用できます。クラスのオブジェクトを返す関数を適用することもできます。 [class.を使用すると、1つのクラスのみを適用できます（もちろん、クラスを数回使用できますが、見た目は本当に悪いです）。

3
elzoy

[ngClass]では、次のような2つの異なるクラスのいずれかを追加できます。

<div [ngClass]="a === b ? 'class1' : 'class2'">
3
FierceDev