在开发模式下，在开发人员控制台中看到 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 无效，它之所以有效，是因为框架在您构建应用程序时提供了编译代码。