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

17 浏览
0 Comments

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

我在学习完Udemy课程后，使用Angular 4来构建一个应用程序。我通过尝试一些事件来开始。目前只有一个组件app.component.ts。在我的HTML中，我有一个头部元素，我已经附加了一个点击事件：

查看已归档的主题

我在h2元素中添加了本地引用#headerLink，以便尝试在其他HTML元素中监听点击事件。但是我无法这样做。我在事件函数中使用console.log来打印元素：

export class AppComponent {
  @ViewChild('headerLink') headerLink: ElementRef;
  viewTopics() {
    console.log(this.headerLink);
  }
}

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

0

2 答案

0 Comments

问题的出现原因是想要监听`h2`元素的点击事件，并在其他元素上显示或隐藏。但是目前的代码中，`console.log(this.headerLink)`的`onclick`属性是`null`，无法实现此功能。

解决方法是通过设置另一个变量来表示`h2`是否被点击，然后使用`*ngIf`指令在其他元素上进行显示或隐藏。这样可以实现预期的效果。

此外，还可以使用`host`绑定来监听整个文档的点击事件。例如：

host: {
  '(document:click)': 'onClick($event)',
}

这样可以在未来的开发中有所帮助。

同时，还可以参考关于`host binding`和`host listeners`的问题，链接为：stackoverflow.com/questions/37965647/…

0
0 Comments

问题出现的原因是需要从HTML元素中提取点击事件的信息。为了解决这个问题，可以通过传入事件对象来获取点击事件的详细信息。

在HTML中，可以使用以下代码来绑定点击事件并传入事件对象：

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

在Angular的组件中，可以使用以下代码来处理点击事件，并打印事件对象的信息：

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

通过以上的代码，可以在控制台上看到点击事件的详细信息。这样就可以方便地提取出点击事件的相关信息，以便在需要的时候进行处理。

0