of-class 在 Angular2 中

Question

我正在 angular 2 中开发一个测试应用程序，但我遇到了根据模型列表添加 classes 的问题。

在 Angular 1 中可以做到：

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

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

在Angular2中，到目前为止我能做的是：

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

这显然不是很动态，我相信一定有更好的方法来做到这一点。

不过，我也试过：

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

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

但这不起作用，我已经尝试将 myClasses 作为单个 class 的字符串名称、字符串数组、具有 classname 键的对象和 true 作为一个值，一个此类对象的数组，但遗憾的是，列出的任何内容都无法以这种方式工作。

Answer 1

您必须指定 CSSClass in directives property of @View decorator. Check out this 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 was renamed to NgClass in alpha-35. See this plunk

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

Answer 2

根据NgClass API docs，Angular 2 将接受字符串、数组或Object/map 作为NgClass 的表达式。或者，当然，您可以指定一个 returns 其中之一的函数。

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

如果您传递的是文字字符串，请注意两种替代语法：

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

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

并引用文档：

While the NgClass directive can interpret expressions evaluating to string, Array or Object, the Object-based version is the most often used and has an advantage of keeping all the CSS class names in a template.

Answer 3

使用 typescript 和 Angular 2 beta，ngClass 似乎不起作用。从关注 API 预览 - https://angular.io/docs/ts/latest/api/common/NgClass-directive.html

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

来自 Google 的示例提供了两个版本的代码（我假设它是 Alpha 并更新为 Beta）。网站示例中的新语法似乎不起作用...有什么想法吗？

@View({
    template: `
        <div class="container questions">
            <div class="row formSection">
                 <h2>
                     <div [ngClass]="completed">completed</div>
                </h2>
                <questionSection></questionSection>
            </div>
        </div>
        `,
        directives: [NgClass, QuestionSection],
})

Answer 4

我正在尝试做类似的事情，我有一个菜单项列表，想为每个项目指定一个很棒的字体 class。这就是我让它工作的方式。在我的打字稿组件中，我有这个：

    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>

这里是 plunker，https://plnkr.co/edit/PIDRZsc7ZhISNgZzOWuY?p=preview 希望有帮助

Answer 5

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

（尽管 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>

希望对大家有所帮助。

of-class 在 Angular2 中

ng-class in Angular2

typescript

typescript1.5

angular

模板

TS

结果