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的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的Angular数据绑定的学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。