如何访问打字稿文件中的css类？答案

【问题标题】：How to access css classes in typescript file?如何访问打字稿文件中的css类？
【发布时间】：2018-12-26 19:07:16
【问题描述】：

这里我想使用 angular.js 中的 ngClass 指令将 CSS 类动态添加到元素中。

<p [ngClass]="addClasses()">testing content</p>

下面是我的ts代码：

isbold: boolean = false;
isItalic: boolean = true;

addClasses() {
   let classes = {
      boldClass: this.isbold,
      italicsClass: this.isItalic
   };
   return classes;
}

boldClass 和 italicsClass 是我的 css 文件中的两个类，这些类应根据相应布尔变量中的值应用。但是我收到错误消息，因为找不到粗体类和斜体类的名称。任何帮助表示赞赏。

【问题讨论】：

你到底在做什么？您想在
标签中添加粗体或斜体类吗？
您不要在对象文字中使用=，而是使用:。比如boldClass: this.isbold。

标签： javascript jquery css angular typescript

【解决方案1】：

这是添加动态类的一种方式

<p [class.boldClass]="isbold"
   [class.italicsClass]="isItalic">testing content </p>

【讨论】：

【解决方案2】：

[ngClass]="{'italicsClass':isItalic,'boldClass':isbold}"

【讨论】：

【解决方案3】：

问题在于你的 JSON，当你声明一个 JSON 时，它的属性不应该是“=”，尝试使用类似的东西：

addClasses(){
  let classes={
    boldClass: this.isbold,
    italicsClass: this.isItalic
  };
  return classes;
}

在 this.isbold 之后有一个未决的“，”，而且，你有 this.Italic，它应该是 this.isItalic。

【讨论】：

【解决方案4】：

尝试使用 Angular 的 Renderer2

@ViewChild('el') element: ElementRef
constructor(private renderer: Renderer2) {
}

addClasses(classes: Array<string>){
  classes.forEach(class => this.renderer.addClass(this.element.nativeElement, 'someClass'))

}



 <p #el>testing content </p>

【讨论】：

【解决方案5】：

ts：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  isbold: boolean = false;
  isItalic: boolean = true;

  addClasses() {
     let classes = {
       boldClass: this.isbold,
       italicsClass: this.isItalic
     };
     return classes;
   }
}

模板：

<p [ngClass]="addClasses()">testing content </p>

css:

.boldClass {
   font-weight: bold;
}

.italicsClass {
   font-style: italic;
}

Demo

【讨论】：