如何在角度8中编写viewchild元素引用的点击事件

Question

尝试了打字稿中元素引用的点击事件，但不起作用。如何编写元素引用的点击事件。如果有人知道，请帮助找到解决方案。

应用程序组件.ts：

@ViewChild('testElem') el:ElementRef;
@ViewChild('testElem2') el2:ElementRef; 

this.el.on('click',()=>{ 
  alert("test"); 
});

应用程序组件.html：

<div #el>testElem</div>

<div #el2>testElem2</div>

Answer 1

你可以做这样的事情：

应用程序组件.html

<div #el">testElem</div>

应用程序组件.ts

import { AfterViewInit, OnDestroy, ViewChild, ElementRef } from '@angular/core'
import { fromEvent, Subscription } from 'rxjs';

@Component({
  selector: 'app-component',
  templateUrl: 'app.component.html'
})
export class AppComponent implements AfterViewInit {
  
  @ViewChild('el', { static: false}) el: ElementRef;

  clickedElement: Subscription = new Subscription();

  ngAfterViewInit() {
    this.clickedElement = fromEvent(this.el.nativeElement, 'click').subscribe(() => console.log('element clicked'));
  }

  ngOnDestroy() {
    // add this for performance reason
    this.clickedElement.unsubscribe();
  }
}

我们使用AfterViewInitHook 是因为 DOM 已经存在。

我希望我能够帮助你。