Angular : onClick on html element according to its class

Question

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

我的模板是：

<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')
  });
}

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

或者只使用 vanilla 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's instances'listen方法。这需要三个参数：

您想监听事件的元素（btnElement）。
事件名称(click)。
回调函数。

这将转换为如下代码：

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 指令自定义第三方小部件。它将允许访问 DOM 元素并使用 renderer2.

附加监听器

<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');
       });
    }
}

Angular : onClick on html element according to its class

Angular : onClick on html element according to its class

javascript

angular2-template

angular

angular5

angular6