Видите привязки углов Angular 6 в консоли разработчика в режиме разработки?

Question

Предположим, у меня есть кнопка со следующими атрибутами:

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

Если я больше обращаюсь к консоли во время запуска приложения в разработке, я получаю только список атрибутов ng-рефлекса, которые ссылаются на мои добавленные атрибуты.

Вопрос: почему я также не вижу привязку (щелчка), которую я только что добавил?

Answer 1

Поскольку ваш код Typescript code, а когда вы хотите посмотреть его в своем браузере, это Javascript code.

Когда вы пишете

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

Этот фрагмент HTML на самом деле переводится в строку, которая используется в коде JavaScript.

Компилятор затем ищет (click) и заменяет этот код на ng-reflect="doStuff()" (это может быть не так, но это идея).

Затем он связывает событие с button.addEventListener('click', () => {...}), добавляет замененную строку в шаблон, и ваша кнопка затем принимает события щелчка.

Это идея того, как работает Angular. Если вы хотите точно знать , как это происходит, вы можете посмотреть их исходный код.

Но суть в том, что (click) не является допустимым JS для тега HTML, он работает из-за скомпилированного кода, который среда предоставляет при создании приложения.