angular 模板語法總結

模板語法（模板表示式）

一：模板表示式

1.同一標籤中表示式中的上下文變數是由模板定義變數（let等產生)、指令的上下文變數（如果有）和元件的屬性疊加而成的。模板變數是最優先的，其次是指令的上下文變數，最後是元件的成員，模板表示式只能引用表示式上下文中的成員。

2.一旦開始資料繫結，就不再跟 html attribute 打交道了。這裡不是設定 attribute，而是設定 dom 元素、元件和指令的 property。

html attribute 與 dom property 的對比:

attribute 是由 html 定義的。property 是由 dom (document object model) 定義的。

少量 html attribute 和 property 之間有著 1:1 的對映，如id。

有些 html attribute 沒有對應的 property，如colspan。

有些 dom property 沒有對應的 attribute，如textcontent。

模板繫結是通過 property 和事件來工作的，而不是 attribute。attribute一旦初始化，就不會被改變，它初始化的是dom的property的值

3.資料繫結的目標是 dom 中的某些東西。這個目標可能是（元素 | 元件 | 指令的）property、（元素 | 元件 | 指令的）事件，或(極少數情況下) attribute 名

4.屬性繫結（[屬性名]) 存在資料繫結屬性就要存在信任（綁的物件為dom的proprty和指令）

檢視元素的屬性 (property) 設定為模板表示式時，就要寫模板的屬性 (property) 繫結 [property]=『元件屬性』

angular 會先去看這個屬性是否是某個已知指令，如果這個屬性是該指令元資料的inputs陣列中所列的名字，或者是帶有@input()裝飾器的屬性。則屬性被對映為指令自己的屬性，就存在信任可以資料繫結，如果該屬性沒有匹配上已知指令或元素的屬性（property),就會報錯

在渲染檢視之前，angular 把這些插值表示式翻譯成相應的屬性繫結，字串的資料用插值表示式更具有可讀性，但是其他的一定要用屬性繫結

5.模板語句有***

刪除這個英雄會更新模型，還可能觸發其它修改，包括向遠端伺服器的查詢和儲存。這些變更通過系統進行擴散，並最終顯示到當前以及其它檢視中（不懂，要是有那麼好，那等於區域性重新整理了，是不是在鉤子函式裡觸發更新）

6.雙向繫結

(input)="currenthero.name=$event.target.value" 第一次見input事件輸入事件

ngmodel輸入屬性會設定該元素的值，並通過ngmodelchange的輸出屬性來監聽元素值的變化（[()]的拆分）

7.模板引用變數(該變數是這個模板的全域性變數）

使用井號 (#) 來宣告引用變數（引用dom物件）取代了jq ,

指令可以修改這種行為，讓這個值引用到別處，比如它自身。 ngform指令就是這麼做的 #heroform="ngform" 引用的是ngform指令 #name='ngmodule'

heroform實際上是乙個angular ngform 指令的引用，因此具備了跟蹤表單中的每個控制項的值和有效性的能力,原生的元素沒有form屬性，但ngform指令有 heroform.form.valid

8.輸入輸出屬性 ( @input 和 @output )

資料繫結的右側為資料繫結的源，左側是指令或者property 指令必須被輸入輸出公開宣告