可以使用Angular 2的Renderer2服务来实现在最近的元素上设置ToggleClass的功能。以下是一个示例代码:
首先,导入Renderer2服务:
import { Component, ElementRef, Renderer2 } from '@angular/core';
然后在组件中注入ElementRef和Renderer2:
constructor(private elRef: ElementRef, private renderer: Renderer2) { }
接下来,在需要设置ToggleClass的地方创建一个方法,并使用Renderer2的addClass和removeClass方法来实现ToggleClass的功能:
toggleClass() {
const element = this.elRef.nativeElement;
this.renderer.addClass(element, 'my-class'); // 添加class
// 或者使用以下代码移除class
// this.renderer.removeClass(element, 'my-class');
}
最后,在模板中使用事件绑定来调用toggleClass方法:
这样,当点击按钮时,就会在最近的元素上添加或移除'my-class'类。
请注意,这个示例中的'toggleClass'方法使用了ElementRef来获取当前组件元素的引用,然后使用Renderer2来操作该元素。另外,为了让Renderer2的addClass和removeClass方法生效,需要确保在引入Renderer2服务的模块中正确地提供Renderer2服务。