javascript-使用Typescript访问DOM类或ID的更好方法

我正在尝试清理应用程序中所有与jQuery相关的内容.当我这样做的时候,我很困惑在javascript方法和有角度的本机方法之间使用.因此,我需要对以下代码进行一些说明.

使用jQuery动态添加和删除类：

$('.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元素