html - Angular动态添加类

Question

有没有办法使用 Angular 解决方案从 .ts 文件添加类

<div [class.extra-sparkle]="isDelightful == true">

我想从 .ts 文件的一侧执行上述操作。代码越少越好。

<button class="general" (click)="ChangeScreen('Global')"       [class.selected]="CurrentPage == 'Global'">Global</button>
<button class="general" (click)="ChangeScreen('Maintenance')"  [class.selected]="CurrentPage == 'Maintenance'">Maintenance</button>
<button class="general" (click)="ChangeScreen('Settings')"     [class.selected]="CurrentPage == 'Settings'">Settings</button>
<button class="general" (click)="ChangeScreen('Profile')"      [class.selected]="CurrentPage == 'Profile'">Profile</button>
<button class="general" (click)="ChangeScreen('Transactions')" [class.selected]="CurrentPage == 'Transactions'">Transactions</button>

我只想在 ChangeScreen 函数中添加这样的内容:

ChangeScreen(page) {
    page.addClass = page;
}

然后我可以删除所有这些行:[class.selected]="CurrentPage == '...'"

Answer 1

您可以使用 ngClass 指令:

<div id="mydiv" [ngClass]="{'myCSSclass' : condition}"></div>

就这么简单!只有当 condition 的计算结果为 true 时，myDiv 才会拥有类 myCSSclass。此条件可以在您的 typescript 文件或模板中设置。