angular - 如何使用 Angular Renderer2 在单击的元素上设置类

Question

我在组件的 html 中的 span 上附加了一个角度点击事件

<span (click)="doWork($event)" > Something </span>

在我的组件中，我想执行一些操作，然后使用 renderer2 的 addClass 方法向这个 span 添加一个类。我从构造函数注入 Renderer2 并在函数中使用它

doWork (e) {
  //some operations
  this.renderer.addClass( e.target, 'selected' );
}

但是我无法以这种方式在跨度上附加课程，我错过了什么吗？

Answer 1

你可以做这样的事情。

<span (click)="doWork()" id="sp_id"> Something </span> // You can use a class if you wish

然后在你的构造函数中这样做：

constructor(private renderer2: Renderer2) {
}

doWork() {
   const span_id = this.renderer.selectRootElement('#sp_id');
   this.renderer.addClass(span_id, 'spclass'); // spclass is the name of the class
}

那将解决它。

Answer 2

您所需行为的另一种实现是使用ngClass和一个标志，用于直接在 HTML 中在单击的元素上添加/删除您的自定义类。

HTML：

<span [ngClass]="classAddFlag ? 'spClass' : ''" (click)="doWork()" > Something </span>

然后在你的doWork()函数中，你只需要正确设置显示或隐藏你的类的标志。

TS：

// Set the flag as component variable
classAddFlag = false;

doWork (e) {
   //some operations
   this.classAddFlag = !this.classAddFlag;
}