JQuery 选择器的 Angular 等价物答案

【问题标题】：Angular equivalent of JQuery selectorsJQuery 选择器的 Angular 等价物
【发布时间】：2021-10-04 01:18:25
【问题描述】：

我想在单击任何给定类的 div 时调用一个方法。在 JQuery 中，这是一个微不足道的单行。我们在 Angular 中有类似的东西吗？

我知道我们可以使用（点击）绑定在点击时调用方法。但这需要为 div 的每个实例单独绑定。我想要一种通用的方法来绑定给定类的每个 div - 就像我们过去对 JQuery 选择器所做的那样

【问题讨论】：

标签： javascript jquery angular web

【解决方案1】：

在 Angular 中，您可以创建自定义指令，将其分配给所需的块并通过 @HostListener 创建点击侦听器。

例如：

HTML

<div appMyDirective>
  div 1
</div>
<div appMyDirective>
  div 2
</div>

指令

@Directive({
  selector: '[appMyDirective]'
})
export class MyDirectiveDirective {

  constructor() { }

  @HostListener('click') onClick() {
    console.log('Привет')
  }

}

可能适合你

【讨论】：

作为指针，指令的选择器也可以是类selector:'.myclass'，参见文档：angular.io/api/core/Directive#selector

【解决方案2】：

Angular 有完全不同的方法。我们通常在标记中绑定事件处理程序，而不是查询 DOM。

<button (click)="onSave()">Save</button>

Event binding

【讨论】：

问题是关于任何具有给定类的 div

【解决方案3】：

您能否详细说明您要实现的目标，将指定在角度中使用 click 和 ngClass 的基本知识，看看是否有帮助

在你的 HTML 文件中

<div class="my_class" (click)="clickDiv()"  
    [ngClass]="isActive ? 'active' : 'notActive'">                
     Some content
</div>

在 .ts 文件中

isActive : boolean = false ;
clickDiv(){
    this.isActive = !this.isActive;       
}

【讨论】：

问题是关于任何具有给定类的 div
那么该指令对您有用吗？ @Vikas，它似乎在做几乎相同的事情来调用点击方法，除非你有一些可重用的代码
指令有效，因为我希望它适用于整个页面中的所有 div 以类似地响应 click 。您的代码将要求我向该类的 div 的每个实例添加相同的代码。那会增加代码大小。我专门针对“任何 div”提出了这个问题。在任何 Angular 教程中都可以使用（单击）。不需要关于 StackOverflow 的问题。 :)