angular 模板語法（官方文檔摘錄）
https://angular.cn/guide/template-syntax
{{}} 和"" 如果嵌套，{{}}裏面求完值，""就是原意
<h3> {{title}} <img src="{{heroImageUrl}}" style="height:30px"> </h3>
但如果不嵌套，雙花括號中的title和引號中的isUnchanged所引用的都是AppComponent中的屬性。
{{title}} <span [hidden]="isUnchanged">changed</span>
模板輸入變量 (let hero
#heroInput)
<div *ngFor="let hero of heroes">{{hero.name}}</div> <input #heroInput> {{heroInput.value}}
hero.name 的hero指的是let hero
模板語句Template statements
有副作用A template statement has a side effect. That‘s the whole point of an event. It‘s how you update application state from user action.
<button (click)="deleteHero()">Delete hero</button>
和表達式中一樣，語句只能引用語句上下文中 —— 通常是正在綁定事件的那個組件實例。
語句上下文可以引用模板自身上下文中的屬性。 在下面的例子中，就把模板的$event對象、模板輸入變量(let hero)和模板引用變量 (#heroForm)傳給了組件中的一個事件處理器方法。
<button (click)="onSave($event)">Save</button> <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button> <form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
在上面的deleteHero(hero)中，hero是一個模板輸入變量，而不是組件中的hero屬性。
要想理解 Angular 綁定如何工作，重點是搞清 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。 -
大量 HTML attribute看起來映射到了property…… 但卻不像我們想的那樣！
最後一類尤其讓人困惑…… 除非我們能理解這個普遍原則：
attribute 初始化 DOM property，然後它們的任務就完成了。property 的值可以改變；attribute 的值不能改變。
當瀏覽器渲染<input type="text" value="Bob">時，它將創建相應 DOM 節點， 其valueproperty 被初始化為 “Bob”。
當用戶在輸入框中輸入 “Sally” 時，DOM 元素的value property 變成了 “Sally”。 但是這個 HTML value attribute 保持不變。如果我們讀取 input 元素的 attribute，就會發現確實沒變：input.getAttribute(‘value‘) // 返回 "Bob"。
HTML attribute value指定了初始值；DOM value property 是當前值。
disabled attribute 是另一個古怪的例子。按鈕的disabled property 是false，因為默認情況下按鈕是可用的。 當我們添加disabled attribute 時，只要它出現了按鈕的disabled property 就初始化為true，於是按鈕就被禁用了。
添加或刪除disabled attribute會禁用或啟用這個按鈕。但 attribute 的值無關緊要，這就是我們為什麽沒法通過 <button disabled="false">仍被禁用</button>這種寫法來啟用按鈕。
設置按鈕的disabled property（如，通過 Angular 綁定）可以禁用或啟用這個按鈕。 這就是 property的價值。
模板綁定是通過 property 和事件來工作的，而不是 attribute。
image 元素的src屬性會被綁定到組件的heroImageUrl屬性上：
<img [src]="heroImageUrl">
setting a property of a directive:
<div [ngClass]="classes">[ngClass] binding to the classes property</div>
設置自定義組件的模型屬性（這是父子組件之間通訊的重要途徑）：
<app-hero-detail [hero]="currentHero"></app-hero-detail>
不能使用屬性綁定來從目標元素拉取值，也不能綁定到目標元素的屬性來讀取它。只能設置它。
如果必須讀取目標元素上的屬性或調用它的某個方法，得用另一種技術。 參見 API 參考手冊中的ViewChild 和 ContentChild。
方括號告訴 Angular 要計算模板表達式。 如果忘了加方括號，Angular 會把這個表達式當做字符串常量看待，並用該字符串來初始化目標屬性。 它不會計算這個字符串。
當滿足下列條件時，應該省略括號：
-
目標屬性接受字符串值。
-
字符串是個固定值，可以直接合並到模塊中。
-
這個初始值永不改變。
把HeroDetailComponent的prefix屬性初始化為固定的字符串，而不是模板表達式。Angular 設置它，然後忘記它。[hero]綁定是組件的currentHero屬性的活綁定，它會一直隨著更新。
<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
屬性綁定還是插值表達式？
下列這幾對綁定做的事情完全相同：
<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p> <p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p> <p><span>"{{title}}" is the <i>interpolated</i> title.</span></p> <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
可讀性，所以傾向於插值表達式。
但數據類型不是字符串時，就必須使用屬性綁定了。
當元素沒有屬性可綁的時候，就必須使用 attribute 綁定。
考慮 ARIA， SVG 和 table 中的 colspan/rowspan 等 attribute。 它們是純粹的 attribute，沒有對應的屬性可供綁定。
[attr.colspan]
angular 模板語法（官方文檔摘錄）