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

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函数的更多信息，请阅读Angular 中 DOM 更新的机制，特别是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具有更丰富的功能，因此比较它们的性能是不公平的。