Angular2渲染器setElementClass isAdd选项不起作用

Question

为什么这不起作用，如文档中所述？

renderer.setElementClass(el, 'class1', false); // replace class
renderer.setElementClass(el, 'class2', true); // add a class

这导致元素只有class2而不是两者。

参考Angular2 renderer docs

Answer 1

事实证明isAdd选项相当于删除类，因此以下内容适用于切换类：

renderer.setElementClass(el, 'class1', false); // remove class1
renderer.setElementClass(el, 'class2', true); // add class2

哦，调用方法setElementClass当然要删除它没什么奇怪的。

Answer 2

现在提到Renderer已被弃用，并已被 Renderer2 取代。在Renderer2类中，有两种方法可以替换已弃用的渲染器的 setElementClass 。

• 添加课程：

  renderer.addClass(this.elementRef.nativeElement, 'popup');

• 删除课程：

  renderer.removeClass(this.elementRef.nativeElement, 'popup');

有关详细信息，请参阅：https://angular.io/api/core/Renderer2

有关教程形式的代码示例，请参阅：https://alligator.io/angular/using-renderer2/ 特别是'addClass / removeClass'的部分

Answer 3

Renderer 类已在版本 9 中移除并将其迁移到 Renderer2

在渲染器中 -> setElementClass(renderElement, className, isAdd)

在 Renderer2 中 -> isAdd ? addClass(renderElement, className) : removeClass(renderElement, className)

简而言之，setElementClass 方法已基于 setElementClass 中传递的第三个参数迁移到 addClass 方法和 removeClass 方法。

• 如果第三个参数为真 -> 方法将是 addClass
• 如果第三个参数为 false -> 方法将是 removeClass