angular - 如何知道使用chrome开发者工具是否触发了Angular 4点击事件？

Question

我的 app.component.html 页面中有以下 html 标签

<a (click)='clicked=0' style='border-style: solid; padding: 5px 50px 5px 50px;' routerLink='/route/show'>Show Details</a>

但是当我在 chrome 中加载此页面并在 chrome 开发工具中查看 html 时，它会显示在下面

<a routerlink="/route/show" style="border-style: solid; padding: 5px 50px 5px 50px;" ng-reflect-router-link="/route/show" href="#/route/show">Show Details</a>

为什么在 Chrome 开发者工具中没有显示我的 (click)=='clicked=0'。有什么我想念的吗，我正在使用 Angular 4。谢谢。

Answer 1

在编译时，(click) 事件绑定(bind)会转换为事件监听器，并且不再作为属性可见，如下所示:

<a (click)='clicked=0' ...

与您的 routerLink 完全相同，被转换为 ng-reflect-router-link

如果您打开开发工具，检查元素，然后打开“事件监听器”选项卡，您将看到事件已被绑定(bind)，并且您可以跟踪它到(最有可能的)匿名函数已生成用于处理 clicked = 0。