在开发人员模式下，是否在开发人员控制台中看到Angular 6单击绑定？

Question

Assume I have a button with the following attributes:

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

If I go to the console while running the app in development more, I only get a list of ng-reflect attributes that refer to my added attributes.

Question is: why don't I also see the (click) binding i just added?

Answer 1

Because your code is Typescript code, and when you want to look at it into your browser, it's Javascript code.

When you write

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

This piece of HTML is actually translated in a string, that is used in the javascript code.

The compiler then search for (click) , and replace this code with ng-reflect="doStuff()" (this might not be true, but this is the idea).

It then binds an event with button.addEventListener('click', () => {...}) , append the replaced string to the template, and your button then accepts click events.

This is an idea of how Angular works. If you want to know exactly how it does that, you can look at their source code.

But bottom line is : (click) isn't valid JS on a HTML tag, it works because of the compiled code the framework provides when you build your application.