从角度提取HTML元素的点击信息

Question

我在上完乌德米课程后，正在使用Angular 4构建一个应用程序。我开始玩一些活动。到目前为止，只有一个组件app.component.ts。在我的HTML中，我有这个header元素，我在上面附加了一个点击事件：

<h2 class="url-link" (click)="viewTopics()" #headerLink>View archived topics</h2>

我将本地引用#headerLink添加到h2元素中，尝试监听其他HTML元素中的click事件。但是我不能这么做。我对事件函数中的元素做了一个console.log:

export class AppComponent {
  @ViewChild('headerLink') headerLink: ElementRef;

  viewTopics() {
    console.log(this.headerLink);
  }
}

控制台日志显示h2元素具有nativeElement属性，该属性具有onclick属性，但该onclick属性始终为null。可以通过这种方式访问h2元素上的click事件吗，或者我必须只使用h2元素上的(click)事件吗？

Answer 1

<h2 (click)="viewTopics()"></h2>
<p *ngIf='headerIsClicked === true'>Toggle me</p>
<h3 *ngIf='headerIsClicked === true'>and me</h3>

viewTopics(): void {
    this.headerIsClicked = !this.headerIsClicked;
  }

其中头文件被点击是一个公共布尔道具，例如公共头文件被点击：布尔=假；

Answer 2

您可以通过传入事件来获取点击事件的详细信息

<h2 class="url-link" (click)="viewTopics($event)" #headerLink>View archived topics</h2>

viewTopics(event){
    console.log('evt', event);
}