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

在本教程中，讲师提出了以下建议：

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

---

而我的方式是：

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

这两种方法都能按预期工作，但我觉得从性能角度来看，我的方法不是很好，因为我使用的是循环，对吗

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

---

谢谢，最好的办法就是这样写

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

像

---

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

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

而

\u ck

函数最终将为每个类调用

renderer.setElementClass

。要了解有关

updateRenderer

函数的更多信息，请阅读，特别是

updateRenderer

部分

而

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

的功能更丰富，因此比较它们的性能是不公平的。

你能添加一个演示吗？很好的解释。非常感谢。

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

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

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

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