typescript – ng-class in Angular2

发布时间：2020-12-17 08:35:17 所属栏目：安全来源：网络整理

导读：我正在开发一个测试应用程序在角度2，我坚持基于列表从模型添加类的问题。在Angular 1中可以做： // model$scope.myClasses = ['class1','class2',...];// view... ng-class="myClasses" ... 在Angular 2中，我所能做到的是： // view... [class.class1]="t

我正在开发一个测试应用程序在角度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',...];
    }

// 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 renamed到NgClass在alpha-35。见this plunk

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!