Question

从教程中，讲师提出了这个问题：

<span class="glyphicon" [class.glyphicon-star-empty]="isFavorite" [class.glyphicon-star]="!isFavorite" (click)="toggleClass()"></span>

组件：

isFavorite = false;

toggleClass() {
 this.isFavorite != this.isFavorite;
}

<小时/> 我的方式是：

<span class="glyphicon" [ngClass]="classes" (click)="toggleClasses()"></span>

组件：

classes = "glyphicon-star-empty";

toggleClasses() {
 this.classes == "glyphicon-star-empty"? this.classes = "glyphicon-star" : this.classes = "glyphicon-star-empty";
}

两种方式都按预期工作，但从性能角度来看，我觉得我的方式并不是很好，因为我正在使用循环，对吧？

很抱歉，如果答案可能只是“是”。我只是想确定它是如何工作的（尤其对所有那些Ng指令感兴趣，比如ngModel，ngClass）。

由于

Answer 1

最好的办法就是这样写。

[ngClass]="{'class1': isFavorite, 'class2': !isFavorite}"

像

<span class="glyphicon" [ngClass]="{'class1': isFavorite, 'class2': !isFavorite}" (click)="toggleClass()"></span>

然后你可以绑定toggleHandler

toggleClass() {
 this.isFavorite != this.isFavorite;
}

Answer 2

这当然是非常主观的，但是如果你担心性能，那么在这种特殊情况下，第一个可能会更快，因为编译器将创建以下简化函数来设置类：

   function updateRenderer() {
        var _co = _v.component;
        var currVal_0 = _co.isFavorite;
        var currVal_1 = _co.isFavorite;
        _ck(_v, 0, 0, currVal_1, currVal_1);
        ...
    });

和_ck函数最终会为每个类调用renderer.setElementClass。要详细了解updateRenderer函数，请阅读The mechanics of DOM updates in Angular，尤其是Update renderer部分。

虽然ngClass经历了使用不同的检查更改的耗时过程：

  ngDoCheck(): void {
    if (this._iterableDiffer) {
      const iterableChanges = this._iterableDiffer.diff(this._rawClass as string[]);
      if (iterableChanges) {
        this._applyIterableChanges(iterableChanges);
      }
    } else if (this._keyValueDiffer) {
      const keyValueChanges = this._keyValueDiffer.diff(this._rawClass as{[k: string]: any});
      if (keyValueChanges) {
        this._applyKeyValueChanges(keyValueChanges);
      }
    }
  }

但是，ngClass具有更丰富的功能，因此比较它们的表现是不公平的。

Angular4 - 动态更改css类 - 哪个更好？

2 个答案: