代码之家 › 专栏 › 技术社区 › firasKoubaa

角度:根据html元素的类单击它

angular2-template angular6 angular5 angular javascript

1

firasKoubaa · 技术社区 · 7 年前

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

}

我的目的是 获取引用 按我的按钮它的事件。

3 回复 | 直到 7 年前

1

3

danday74 7 年前

通常,第三方小部件应提供如下单击处理程序:

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

在控制器中:

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

但是,如果它们不公开click处理程序,那么我会认真考虑不使用这个小部件。

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

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

如果按钮在上不可用 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)
}

2

3

SiddAjmera 7 年前

使用jQuery访问DOM元素并不是一个好的实践。使用 ElementRef 具有 Renderer2 相反。而且,没有什么比 ngOnViewInit 有棱角的。它是 ngAfterViewInit .

ngAfterViewInit HTMLElement 使用 nativeElement 在 元素参考 实例。你应该把它显式地输入到 HTMLElement公司 以获得智慧。

querySelector 然后把它传给其他同学。这将为您提供按钮元素。

现在你用 渲染器2 的实例 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 供参考。

3

0

Suresh Kumar Ariya 7 年前

您可以使用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');
       });
    }
}