Question

是否有一种使用Angular解决方案从.ts文件中添加类的方法

 changeState(state: any) {
        this.activeState                             = state;
        const player: AnimatedSprite | DisplayObject = this.container.getChildByName('player');
        this.container.removeChild(player);
        const playerSprite = new PIXI.extras.AnimatedSprite(this.activeState);
        playerSprite.gotoAndPlay(0);
        playerSprite.animationSpeed = 0.1;
        playerSprite.name           = 'player';
        this.container.addChild(playerSprite);
    }

我想从.ts文件的侧面进行上述操作。代码越少越好。

<div [class.extra-sparkle]="isDelightful == true">

我只想在ChangeScreen函数中添加以下内容：

<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(page) { page.addClass = page; }

Answer 1

尽管使用Renderer解决方案有效，但我建议您为按钮创建一个数据结构

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。

Answer 2

使用Renderer

查看此处：§9.4.3

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

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/Renderer#setElementClass

此处：https://angular.io/api/core/Renderer2

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>

Answer 3

您可以使用ngClass指令：

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

就这么简单！仅当myCSSclass的值为condition时，myDiv才会具有类true。可以在您的打字稿文件或模板中设置此条件。

角动态添加类

3 个答案: