css Angular动态添加类

s3fp2yjn 于 2023-04-23 发布在 Angular

关注(0)|答案(4)|浏览(141)

有没有一种方法可以使用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 == '...'"

css

来源：https://stackoverflow.com/questions/51187256/angular-add-class-dynamically

4条答案

按热度按时间

wz1wpwve1#

您可以使用ngClass指令：

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

就这么简单！myDiv只有在condition的计算结果为true时才会有类myCSSclass。这个条件可以在你的脚本文件或模板中设置。

赞(0）回复(0）举报 2023-04-23

rks48beu2#

使用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($event)">Global</button>

赞(0）回复(0）举报 2023-04-23

waxmsbnn3#

虽然解决方案与渲染工程，我建议您创建一个数据结构，为您的按钮

buttons: Array<{label: string}> = [
    {
      label: 'Global'
    },
    {
      label: 'Maintenance'
    },
    {
      label: 'Settings'
    },
    {
      label: 'Profile'
    },
    {
      label: 'Transactions'
    }
  ]

这可以很容易地通过使用ngFor进行迭代

<button 
  *ngFor="let button of buttons" 
  class="general" 
  (click)="ChangeScreen(button.label)" 
  [class.selected]="CurrentPage == button.label">
  {{ button.label }}
</button>

你的ChangeScreen方法唯一需要做的就是...它已经在做的事情，设置当前页面！
请参阅stackblitz以了解如何执行此操作。

赞(0）回复(0）举报 2023-04-23

bwitn5fc4#

在Angular中使用class编程添加类