javascript - 在开发模式下看到开发者控制台中的 Angular 6 点击绑定(bind)？

Question

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

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

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

问题是:为什么我没有看到我刚刚添加的(单击)绑定(bind)？

Answer 1

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

当你写的时候

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

这段 HTML 实际上是翻译成一个字符串，在 javascript 代码中使用。

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

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

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

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