我正在尝试清理应用程序中所有与jQuery相关的内容.当我这样做的时候,我很困惑在javascript方法和有角度的本机方法之间使用.因此,我需要对以下代码进行一些说明.
$('.my-class').removeClass('list-hide').addClass('list-show');
用Javascript：
var element = document.getElementByClassName('.my-class');
element.classList.remove('list-hide');
element.classList.add('list-show');
使用TypeScript：
const element = this.elemRef.nativeElement.querySelector('.my-class');
element.classList.remove('list-hide');
element.classList.add('list-show');
事情是如上所述,我有许多方案可以通过DOM ID和类名进行访问.而且,如果我选择ElementRef,我可能最终会多次编写this.elementRef.nativeElement.
此外,在官方文档中还说-‘如果不支持直接访问本机元素,请使用Render2’,并带有警告提示.
因此,请帮我提供更好的方法来访问DOM元素,而无需从我的Angular应用程序中进行更多的重复和jQuery.
最佳答案
据我了解,使用ngClass可以更轻松地动态添加和删除类.
如果您要定位到特定的类,并且想动态执行添加或删除类,则可以执行以下操作：
如果您要定位到特定的类,并且想动态执行添加或删除类,则可以执行以下操作：
在ts中：
filterBy:string = '';
selectedItemCode(field){
this.filterBy = field;
}
在html中：
<div (click)="selectedItemCode('random1')">Example-One</div>
<div (click)="selectedItemCode('random2')">Example-two</div>
<section class="my-class" [ngClass]="filterBy === 'random1'? 'list-show' : 'list-hide'">
</section>
并回答与elemRef.nativeElement.querySelector(‘my-class’)的重复有关的问题：
使用如下所示的ngAfterViewInit生命周期挂钩：
export class SomeComponent {
public element;
constructor(private elemRef: ElementRef){}
ngAfterViewInit(){
this.element = this.elemRef.nativeElement;
}
}
之后,您可以直接使用this.element.querySelector访问DOM元素