Angular2中的ng类

Question

我正在用angular 2开发一个测试应用程序，我遇到了一个基于模型列表添加类的问题。

在角度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" ...

但这不起作用，我已经尝试将< code>myClasses作为单个类的字符串名称、字符串数组、具有classname键的对象以及作为值的true，这种类型的对象数组，但遗憾的是，所列出的都不能这样工作。

Answer 1

另一种方法 [ 使用三元运算符和插值]

(尽管< code>Mark Rajcok陈述了所有可能的< code>ngClass方法，但是您可以将它与< code >三元运算符耦合，并得到< code>else条件)

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

或者将三元运算符与ngClass一起使用，查看如何

export class App {
  this.classCondition = false;
}

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

希望它能帮助某人。

Answer 2

您必须在＜code＞@View＜/code＞decorator的＜code＞指令＜/code＞属性中指定＜code＞CSSClass＜/code>。看看这个笨蛋。

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

更新

在alpha-35中，< code>CSSClass被重命名为< code>NgClass。看到这扑通一声了吗

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

Answer 3

根据NgClass API文档，Angular 2将接受字符串、数组或Object/map作为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;
}

扑通一声

如果您传递的是文字字符串，请注意两种可选的语法:

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

我认为第一个只是第二个的语法糖。

引用文件:

虽然Ngclass指令可以解释计算为字符串、数组或对象的表达式，但基于对象的版本是最常用的，并且具有将所有CSS类名保留在模板中的优势。