34

angular 2でテストアプリケーションを開発していますが、モデルのリストに基づいてクラスを追加するという問題に悩まされています。

Angular 1 では、次のことができます。

// model
$scope.myClasses = ['class1', 'class2', ...];

// view
... ng-class="myClasses" ...

Angular 2 でこれまでにできることは次のとおりです。

// view
... [class.class1]="true" [class.class2]="true" ...

これは明らかにあまり動的ではなく、これを行うためのより良い方法があるはずです。

ただし、次のことも試しました。

// model
class ... {
    private myClasses: any;
    constructor() {
        this.myClasses = ['class1', 'class2', ...];
    }

// view
... [class]="myClasses" ...

しかし、これは機能しませんmyClasses。単一のクラスの文字列名、文字列の配列、クラス名キーを持つオブジェクト、値として true 、この種のオブジェクトの配列として試しましたが、悲しいことに、リストされているものは何も機能しませんこちらです。

4

5 に答える 5

39

NgClass API docsによると、Angular 2 は文字列、配列、またはオブジェクト/マップを NgClass への式として受け入れます。もちろん、それらのいずれかを返す関数を指定することもできます。

import {Component, CORE_DIRECTIVES} from 'angular2/angular2'

@Component({
  selector: 'my-app',
  directives: [CORE_DIRECTIVES],
  template: `
    <div>
      <h2>{{title}}</h2>
      <div ngClass="gray-border purple">string of classes</div>
      <div [ngClass]="'gray-border purple'">string of classes</div>
      <div [ngClass]="['gray-border', 'green']">array of classes</div>
      <div [ngClass]="{'gray-border': true, 'blue': true}">object/map of classes</div>
      <button [ngClass]="{active: isActive}" (click)="isActive = !isActive">Click me</button>
    </div>
  `,
  styles: [`
    .gray-border {  border: 1px solid gray; }
    .blue   { color: blue; }
    .green  { color: green; }
    .purple { color: purple; }
    .active { background-color: #f55; }
  `]
})
export class App {
  title = "Angular 2 - NgClass";
  isActive = false;
}

Plunker

リテラル文字列を渡す場合は、2 つの代替構文に注意してください。

<div ngClass="gray-border purple">string of classes</div>
<div [ngClass]="'gray-border purple'">string of classes</div>

1 つ目は 2 つ目のシンタックス シュガーに過ぎないと思います。

ドキュメントを引用するには：

NgClass ディレクティブは文字列、配列、またはオブジェクトに評価される式を解釈できますが、オブジェクトベースのバージョンが最も頻繁に使用され、すべての CSS クラス名をテンプレートに保持できるという利点があります。

于 2015-11-14T21:53:10.030 に答える
2

typescript と Angular 2 ベータ版を使用すると、ngClass が機能しないようです。API プレビューに従うことから - https://angular.io/docs/ts/latest/api/common/NgClass-directive.html

template: '<div [ngClass]="classMap">Class Map</div>'

Google の例では、2 つのバージョンのコードが提供されています (これはアルファ版であり、ベータ版に更新されていると想定しています)。Web サイトの例の新しい構文は機能していないようです...何かアイデアはありますか?

@View({
    template: `
        <div class="container questions">
            <div class="row formSection">
                 <h2>
                     <div [ngClass]="completed">completed</div>
                </h2>
                <questionSection></questionSection>
            </div>
        </div>
        `,
        directives: [NgClass, QuestionSection],
})
于 2015-12-21T09:39:20.310 に答える