typescript – ng-class in Angular2

我正在开发一个测试应用程序在角度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作为单个类的字符串名称,数组的字符串,对象与类名键和真值作为一个值,这种类型的对象数组,但可悲的是,没有列出将工作方式。

您必须在@View装饰的directives属性中指定CSSClass。看看这个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 renamedNgClass在alpha-35。见this plunk

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

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:typescript – ng-class in Angular2