在开发模式下查看开发者控制台中的 Angular 6 点击绑定？

Posted 2023-03-05

【中文标题】在开发模式下查看开发者控制台中的 Angular 6 点击绑定？

【英文标题】：See the Angular 6 click bindings in the developer console while in dev mode?

【发布时间】：2018-12-12 14:05:28

【问题描述】：

假设我有一个具有以下属性的按钮：

<button>
    class="button"
    (click)="doStuff()"
    [ngClass]="'stuff': selected">
  Push me
 </button>

如果我在开发中运行应用程序时进入控制台，我只会得到一个引用我添加的属性的 ng-reflect 属性列表。

问题是：为什么我还没有看到我刚刚添加的（点击）绑定？

【参考方案1】：

因为您的代码是 Typescript 代码，而当您想在浏览器中查看时，它是 Javascript 代码。

当你写作时

<button>
    class="button"
    (click)="doStuff()"
    [ngClass]="'stuff': selected">
  Push me
</button>

这段 html 实际上被翻译成一个字符串，用于 javascript 代码。

然后编译器搜索(click)，并将这段代码替换为ng-reflect="doStuff()"（这可能不是真的，但这就是想法）。

然后它用button.addEventListener('click', () => ...) 绑定一个事件，将替换的字符串附加到模板，然后您的按钮接受点击事件。

这是 Angular 工作原理的一个想法。如果您想确切了解它是如何做到的，您可以查看他们的源代码。

但底线是：(click) 不是 HTML 标记上的有效 JS，它之所以有效，是因为框架在您构建应用程序时提供了编译代码。

【讨论】：

对我来说问题是 - 出于调试目的 - 我想确切地看到 ng-reflect='doStuff' 或类似的东西，告诉我我已经向该节点添加了一些事件。有时我不想回到代码中来确认我确实为那个元素添加了一个（点击）监听器

很抱歉，但你不能，或者更准确地说，如果可能的话，我不知道你怎么做。此外，作为开发人员，查看您的代码以了解您做错了什么应该不是问题......

这更多的是不便；有时您不想在浏览器中查看 DOM 时中断流程

提问者显然询问在控制台中查看点击事件是为了方便和更快的开发体验（以同样的方式您可以在 AngularJs 中看到 ng-click、ng-if）。他没有问 Angular 内部是如何工作的……不幸的是，Angular 团队做出了一个糟糕的选择，让开发人员的调试变得更加困难。