web-dev-qa-db-ja.com

Angular2のngクラス

私は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のオブジェクト、この種のオブジェクトの配列として試しましたが、残念ながら、リストされているものはどれもこのようには機能しません。

typescriptangulartypescript1.5
34
Marko Grešak

CSSClass の directives プロパティを @View デコレータで指定する必要があります。これを確認してください plunk 。

@Component({
    selector: 'app',
})
@View({
    template: '<div [class]="classMap">Class Map</div>',
    directives: [CSSClass]
})
class App {
    constructor() {
        this.classMap = { 'class1': true, 'class2': false };

        setInterval(() => {
            this.classMap.class2 = !this.classMap.class2;
        }, 1000)
    }
}

UPD

CSSClass名前が変更されました to NgClass alpha-35。 this plunk を参照してください

@Component({
  selector: 'app',
})
@View({
  directives: [NgClass],
  template: `
    <div [ng-class]="classMap">Class Map</div>
  `,
})
class App { /* ... */ }
33
alexpods

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

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>

最初のものは、2番目のものの単なる構文糖だと思います。

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

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

39
Mark Rajcok

もう1つの方法 [三項演算子と補間の使用]

（Altough Mark Rajcokは可能なすべてのngClassメソッドを記述しましたが、ternary operatorと組み合わせてelse条件を取得できます）

テンプレート

<div class="hard-coded-class {{classCondition ? 'c1 c2': 'c3 c4'}}">
    Conditional classes using <b>Ternary Operator</b>
</div>

またはternary operatorをngClassとともに使用する、 方法を見る

TS

export class App {
  this.classCondition = false;
}

結果

<div class="hard-coded-class c3 c4">
      Conditional classes using <b>Ternary Operator</b>
</div>

それが誰かを助けることを願っています。

21
Ankit Singh

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],
})
2
Nick Taras

同様のことをしようとしていました。メニュー項目のリストがあり、各項目にfontawesomeクラスを指定したかったのです。これは私がそれを機能させた方法です。私のTypeScriptコンポーネントにはこれがありました：

    export class AppCmp {
       menuItems = [
         {
           text: 'Editor',
           icon: 'fa fa-pencil'
         },
         {
           text: 'Account',
           icon: 'fa fa-user'
         },
         {
           text: 'Catalog',
           icon: 'fa fa-list'
         }
      ]
    }

その後、私のHTMLで：

  <div *ngFor="#item of menuItems; #index = index">
        <i [attr.class]="item.icon"></i>
        <span>{{ item.text }}</span>
  </div>

ここにプランカーがあります、 https://plnkr.co/edit/PIDRZsc7ZhISNgZzOWuY?p=preview

1
Will