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

Question

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

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

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

其中headerIsClicked 是public boolean 属性，例如public headerIsClicked: boolean = false;