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