如何在不使用 ng-Class 或 ng-Style 的情况下在 angular 7 中的单击事件中添加 CSS class？

Question

如何在 Angular7 中点击 CSS 类到 HTML 元素？我想在不使用 Ng-Style 和 Ng-Class 指令的情况下实现这一目标。

提前致谢。

Answer 1

import { Directive, HostBinding} from '@angular/core';

@Directive({
  selector: '[myDirective]',
})
export class MyDirective {

  @HostBinding('class')
  elementClass = 'custom-theme';

  constructor() {
  }
}

然后就像

一样使用它

<div myDirective> </div>

直接使用内部组件

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


@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent  {

  constructor(private renderer: Renderer) {}

  click(event) {
    renderer.addClass(event.target, 'popup');
  }
}

Answer 2

我认为这是您想要实现的目标（点击时添加和删除 Class）：

clicked(event) {
let oldClass = event.target.getAttribute('class');
if (oldClass == null) {
  oldClass = '';
  this.render.setElementAttribute(event.target, "class", oldClass + 'selected');
} else if (oldClass.includes('selected')) {
  oldClass = oldClass.replace('selected', '')
  this.render.setElementAttribute(event.target, "class", oldClass);
} else {
  this.render.setElementAttribute(event.target, "class", oldClass + ' selected');
}

不要忘记 import { Renderer } from '@angular/core'; 并添加 constructor(private render: Renderer) { }

见Stackblitz Demo

有关 Renderer and .replace() or .replace()

的更多信息

如何在不使用 ng-Class 或 ng-Style 的情况下在 angular 7 中的单击事件中添加 CSS class？

How to add a CSS class when in the click event in angular 7 without using ng-Class or ng-Style?

typescript

angular7