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

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

抱歉，如果答案可能只是"is"。我只是想确定它是如何工作的(对所有这些 Ng 指令特别感兴趣，比如 ngModel、ngClass)。

谢谢

Answer 1

最好的办法就是这样写。

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

喜欢

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

然后就可以绑定(bind)toggleHandler了

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