删除和添加类动态触发变化检测（Angular 2+）答案

【问题标题】：Remove and add class dynamically triggering change detection in between (Angular 2+)删除和添加类动态触发变化检测（Angular 2+）
【发布时间】：2021-12-10 15:00:58
【问题描述】：

简而言之，我试图触发renderer.removeStyle 和renderer.addStyle 之间的变化检测循环。我添加的样式是 CSS 动画。当它被删除并添加到同一个变化检测循环中时，Angular 不会检测到某些变化（对于相同的动画名称）。

更多详情

假设我有一个按钮事件(click)="addAnimation('animation1')"，它应该添加现有动画并添加名为animation1, animation2 ... 的新动画。当然下面的代码是行不通的：

  addAnimation(animationName: string): void {
    this.renderer.removeStyle(this.animate.nativeElement, 'animation');
    // setTimeout(() => {
      this.renderer.setStyle(this.animate.nativeElement, 'animation', animationName)
    // }, 0);
  }

因为在角鼻下删除和添加样式不会触发任何更改。

一种可能的解决方案是添加超时（如上面注释的代码，但它有我不感兴趣的副作用，而且代码有点连线。

我希望通过在两者之间添加类似 this.appRef.tick(); 的东西来强制 Angular 创建另一个变化检测循环来解决它。

这不起作用，我错过了什么？任何建议如何正确地做到这一点？谢谢！

【问题讨论】：

是否非得对多个元素使用它，并且每个元素添加不同的类？
你能澄清一下这个问题吗？我不确定我是否理解它。
我有我的答案，它可以帮助你：stackoverflow.com/questions/51187256/…
@לבנימלכה 请阅读问题。这不是关于使用渲染器，而是关于更改检测。

标签： css angular css-animations angular12

【解决方案1】：

尝试以下方式。

isClick=false;
onClick(){
    isClick=true;
}

<div [ngClass]="{'yourCSSClass': isClick}">

【讨论】：

谢谢，但这不是我要找的。这是一个非常有限的解决方案，添加新类需要大量维护。我正在寻找动态注入动画的动态解决方案。我将更新我的问题以澄清这种行为。