Angular数据绑定的学习笔记

https://angular.io/guide/property-binding

Property binding in Angular helps you set values for properties of HTML elements or directives.

property binding用于给html元素或者Directive的属性设置值。

The metadata for a component tells Angular where to get the major building blocks that it needs to create and present the component and its view. In particular, it associates a template with the component, either directly with inline code, or by reference. Together, the component and its template describe a view.

Component同template一起，描述一个view.

directives: apply app logic to what gets displayed.

Without a framework, you would be responsible for pushing data values into the HTML controls and turning user responses into actions and value updates. Writing such push and pull logic by hand is tedious, error-prone, and a nightmare to read, as any experienced front-end JavaScript programmer can attest.

<li>{{hero.name}}</li>
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
<li (click)="selectHero(hero)"></li>

• 第一个用法，将Component hero.name属性的值显示到li元素中。
• 第二个用法，将selectedHero，即hero-list Component的属性，传递到herodetail Component的hero属性中去。这是Component属性到Component属性间的值传递。

第三个用法，当用户点击hero名称时，触发Component里的selectHero方法。

Angular还有一种有用的双向绑定机制：

In two-way binding, a data property value flows to the input box from the component as with property binding. The user’s changes also flow back to the component, resetting the property to the latest value, as with event binding.

Angular模板是动态的，当模板被渲染时，根据template里的指令去转换DOM.

Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given by directives. A directive is a class with a @Directive() decorator.

A component is technically a directive. Angular defines the @Component() decorator, which extends the @Directive() decorator with template-oriented features.

Component技术上其实也是一种Directive，只不过在后者的基础上，扩展出了一整套面向模板的特性。

更多Jerry的原创文章，尽在：“汪子熙”: