Angular：根据其类单击html元素

Question

在我的 Angular 应用程序下，我正在使用一些在我的组件中呈现的第三个库小部件。

我的模板是：

<div>
  <myWidGet></myWidGet>
</div>

在myWidGet 里面有一些按钮元素，我想处理它们的事件。 该按钮有这些类：.dx-edit-row .dx-command-edit .dx-link-save

所以我这样做了：

export class myClass AfterViewInit { 

  constructor(private elRef: ElementRef){}

  ngAfterViewInit() {
    this.elRef.nativeElement.querySelector('.dx-edit-row .dx-command-edit .dx- 
link-save').on('click', (e) => {
      alert('test');
    });
  }

}

我的目的是获取参考到我的按钮并从中处理点击事件。

建议？

Answer 1

通常，第 3 方小部件应提供如下点击处理程序：

<myWidGet (click)="myFunction($event)"></myWidGet>

在控制器中：

myFunction(evt) {
  const target = evt.target
  console.log('test')
}

但是，如果他们不公开点击处理程序，那么我会认真考虑不使用小部件。

如果仍然想使用小部件，那么使用 jQuery 来执行此操作：

ngAfterViewInit() {
  $('.dx-edit-row.dx-command-edit.dx-link-save').on('click', (evt) => {
    const target = evt.target
    console.log('test')
  });
}

以上假设所有这些类都出现在同一个按钮上。

或者只使用原版 JS。

如果按钮在 ngAfterViewInit() 上不可用，那么您可以这样做：

ngAfterViewInit() {
  const interval = setInterval(() => {
    const button = $('.dx-edit-row.dx-command-edit.dx-link-save')
    // if button is ready
    if (button) {
      // add click handlers
      button.on('click', (evt) => {
        const target = evt.target
        console.log('test')
      });
      // stop polling
      clearInterval(interval)
    }
  }, 100)
}

Answer 2

使用 jQuery 访问 DOM 元素并不是一个好习惯。将ElementRef 与Renderer2 一起使用。此外，在 Angular 中没有像 ngOnViewInit 这样的东西。我是ngAfterViewInit。

加载视图后，在ngAfterViewInit 中，您可以使用ElementRef 实例上的nativeElement 访问HTMLElement。您应该将其显式类型转换为HTMLElement 以获得智能。

然后您可以在其上调用querySelector 并将类传递给它。这将为您提供按钮元素。

现在您使用Renderer2 的实例的listen 方法。这需要三个参数：

1. 您要监听事件的元素 (btnElement)。
2. 事件名称(click)。
3. 回调函数。

这将转化为如下代码：

constructor(
  private el: ElementRef,
  private renderer: Renderer2
) {}

ngAfterViewInit() {
  const btnElement = (<HTMLElement>this.el.nativeElement)
    .querySelector('.dx-edit-row.dx-command-edit.dx-link-save');

  this.renderer.listen(btnElement, 'click', () => {
    alert('Buton was clicked');
  });
}

这里有一个Working StackBlitz 供您参考。

Answer 3

您可以使用 Angular 指令自定义第三方小部件。它将允许使用 renderer2 访问 DOM 元素并附加侦听器。

<myWidGet customEvents></myWidGet>

指令：

@Directive({
   selector: '[customEvents]'
})
export class CustomEventsDirective implements OnInit {
    private element: any;
    constructor(private el: ElementRef, private renderer: Renderer2) {
        this.element = el.nativeElement;
    }
    ngOnInit() {

       const btnElement = this.element.querySelector('.dx-edit-row.dx-command-edit.dx-link-save');

       this.renderer.listen(btnElement, 'click', () => {
         alert('Buton was clicked');
       });
    }
}