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

Posted 2023-03-13

【中文标题】如何访问打字稿文件中的css类？

【英文标题】：How to access css classes in typescript file?

【发布时间】：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。

【参考方案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