角动态添加类

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>

就那么简单！myDivmyCSSclass仅在condition评估为true. 此条件可以在您的打字稿文件或模板中设置。

Answer 2

用 Renderer

请参阅此处：https : //angular.io/api/core/Renderer

在这里：https : //angular.io/api/core/Renderer#setElementClass

import { Renderer } from '@angular/core';

constructor(private render:Renderer) { }

ChangeScreen(event:any) {
 this.renderer.setElementClass(event.target,"selected",true);
}

在 HTML 中：

<button class="general" (click)="ChangeScreen()">Global</button>

或者Render2：

见这里：https : //angular.io/api/core/Renderer2

在这里：https : //angular.io/api/core/Renderer2#addClass

import { Renderer2 } from '@angular/core';

constructor(private render:Renderer2) { }

ChangeScreen(event:any) {
 this.renderer.addClass(event.target,"selected");
}

在 HTML 中：

<button class="general" (click)="ChangeScreen()">Global</button>