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

Question

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

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

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

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

Answer 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，它之所以有效，是因为框架在您构建应用程序时提供了编译代码。