如果不是指令，Angular 2中的（点击）是什么？

Question

In the docs of Angular 2 it's written:

Why create a directive to handle a click when we can write a simple binding such as this? <button (click)="onSave()">Save</button>

If this isn't a directive, what is it then? They call it "a simple binding", how is this different from a directive? I mean it's still something special handled by Angular, so why are they so proud that it's (click) instead of ng-click like in Angular 1?

Answer 1

It is my understanding that the parentheses (event) syntax is NOT a directive, but a binding syntax that allows the developer to use DOM events without having to write a directive. Whereas, ng-click is a directive, of course.

With this new binding syntax, there is no need to code a directive to take advantage of DOM events. There are a lot of DOM events , so not having to maintain a directive for all of them is nice. And something to be proud of, IMO.

I hope this helps you out.

Answer 2

From my understanding, the rules around binding are such that Angular (2) doesn't even know anything about explicit about click. The runtime can't find anything else (directive, component) named "click", so it just adds in a DOM click property. Because it is (click) and not [click], it adds it in as onclick and then your browser knows what to do with it.

It threw me for a loop at first because,coming from AngularJS (1.x), I was trying to find in the API reference for what DOM things they aliased (like click). Then I realized they didn't need to alias the DOM with their own directives when I read this carefully https://angular.io/docs/ts/latest/guide/template-syntax.html

Or I'm completely missing the boat, which wouldn't surprise me.