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 == '...'"

原文由 Paul Kruger 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 ngClass 指令：

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

就那么简单！仅当 condition 评估为 true 时，myDiv 才会拥有课程 myCSSclass 。这个条件可以在你的打字稿文件或模板中设置。

原文由 sticky_elbows 发布，翻译遵循 CC BY-SA 4.0 许可协议