javascript - Angular - 提取 HTML 元素的点击信息

Question

在参加了 Udemy 类(class)后，我正在使用 Angular 4 构建应用程序。我开始玩一些事件。到目前为止只有一个组件app.component.ts。在我的 HTML 中，我有一个附加了点击事件的标题元素:

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

我在 h2 元素中添加了本地引用 #headerLink 来尝试监听其他 HTML 元素中的点击事件。但我不能这样做。我在事件函数中做了一个元素的 console.log:

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

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

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

Answer 1

可以通过传入事件获取点击事件详情

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

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