创建一个添加css类的函数

Question

我正在使用Angular并在app.component.ts中我想创建一个函数，它将css类添加到包含类的div：

例如：

<div class="mydiv">
   Another class will be injected to this div's class
</div>

所以，如果我创建一个函数：

myfunction() {
  //Code here to add the class to the div in typescript
}

我如何在打字稿中做到这一点？

Answer 1

最简单的方法是绑定：

<div [class.myclass]="flag"></div>

在您的控制器中

public flag: boolean = false;

myFunction() {
    this.flag = !this.flag;
} 

Answer 2

您可以使用[ngClass]，它允许您根据组件操作类

在Component类

中

arrayOfClassNames: string[] = ['big'];

addClass(newClassName: string): void {
    this.arrayOfClassNames.push(newClassName);
}

HTML模板

<div [ngClass]="arrayOfClassNames">Some text</div>

然后，您可以创建任何您想要添加/删除/替换类的方法。

查看使用ngClass的多种方法。