來(lái)源：segmentfault.com
- 模型-視圖-控制器（MVC）
- 模型-視圖-視圖模型（MVVM）
- Angular 組件相當(dāng)于 控制器 或 視圖模型
- Angular 模版相當(dāng)于 視圖
變量
模版輸入變量
<hero-detail *ngFor = "let hero of heroes"
[hero] = "hero">
</hero-detail>
- let關(guān)鍵字創(chuàng)建了一個(gè)名叫hero的模板輸入變量
- ngFor指令每次迭代都從數(shù)組中把當(dāng)前元素賦值給hero變量
- 可以在ngFor的宿主元素（及其子元素）中引用模板輸入變量hero
模版引用變量
- 模板引用變量通常用來(lái)引用 模板中的某個(gè)DOM元素
- 模板引用變量還可以用來(lái)引用Angular組件蝇更、指令 或 Web Component
- 可以在模板中的任何地方引用模板引用變量
<button #buttonDOM></button>
{{buttonDOM}}
<button ref-buttonDOM></button>
{{buttonDOM}}
[object HTMLButtonElement]
- 模板引用變量的值默認(rèn)是設(shè)置模板引用變量的元素
- 模板引用變量的值也可以設(shè)置為其它內(nèi)容的引用（比如表單中引用為ngForm指令）
<form #myForm="ngForm">
</form>
表達(dá)式
插值表達(dá)式
說(shuō)明
插值表達(dá)式：在視圖模板中，{{ }}及{{ }}中的內(nèi)容呼盆。
- {{ }}中的內(nèi)容年扩，稱為模版表達(dá)式
- {{ }}中的內(nèi)容通常是組建類的屬性或方法
- Angular 對(duì){{ }}中的內(nèi)容，先求值访圃，再轉(zhuǎn)成字符串
使用
<p> {{ name }} </p>
模版表達(dá)式
說(shuō)明
模板表達(dá)式產(chǎn)生一個(gè)值厨幻。
模板表達(dá)式不支持內(nèi)容：
- 賦值（=）
- 操作并賦值（+=、-=、...）
- 自增况脆、自減（++饭宾、--）
- new 運(yùn)算符
- 使用; 或 ,的鏈?zhǔn)奖磉_(dá)式
- 位運(yùn)算（| 和 &）
- 支持內(nèi)容（模版表達(dá)式運(yùn)算符）：
使用
{{ 1 + 1 }}
[property] = "expression"
表達(dá)式上下文
表達(dá)式上下文 是模版中各種綁定值的來(lái)源。
表達(dá)式上下文包括（優(yōu)先級(jí)由高到低）：
- 模版輸入變量
- 模版引用變量
- 指令的上下文變量
- 模版對(duì)應(yīng)組建類的實(shí)例
注意：
- 模板表達(dá)式只能引用表達(dá)式上下文中的成員
- 模板表達(dá)式不能引用全局命名空間中的任何東西（比如：window 格了、document看铆、console.log）
模板表達(dá)式操作符
管道操作符（|）
管道是一個(gè)簡(jiǎn)單的函數(shù)，它接受一個(gè)輸入值盛末，并返回轉(zhuǎn)換結(jié)果弹惦。
- 管道操作符會(huì)把它左側(cè)的表達(dá)式結(jié)果傳給它右側(cè)的管道函數(shù)。
安全導(dǎo)航操作符（?.）
- 安全導(dǎo)航操作符用來(lái)保護(hù)出現(xiàn)在屬性路徑中null和undefined值悄但，保護(hù)視圖渲染器棠隐，讓它免于失敗。當(dāng)person不存在時(shí)算墨，下面代碼將報(bào)錯(cuò)宵荒，組件視圖將無(wú)法渲染。
{{person.name}}
傳統(tǒng)解決方法：
<ng-container *ngIf="person">
{{person.name}}
</ng-container>
{{person && person.name}}
安全導(dǎo)航操作符方式：
{{person?.name}}
非空斷言操作符（!）
- 在 TypeScript 2.0 中净嘀，可以使用--strictNullChecks標(biāo)志強(qiáng)制開啟嚴(yán)格空值檢查报咳。
- 在嚴(yán)格空值檢查模式下，如果有未賦值的變量挖藏，或者試圖把null或undefined賦值給不允許為空的變量暑刃，類型檢查器就會(huì)拋出一個(gè)錯(cuò)誤。
- 在嚴(yán)格空值檢查模式下膜眠，如果類型檢查器在運(yùn)行期間無(wú)法確定一個(gè)變量是否是null或undefined岩臣，也會(huì)拋出一個(gè)錯(cuò)誤。
- 非空斷言操作符（!）用于告訴 TypeScript 的類型檢查器對(duì)特定的屬性表達(dá)式宵膨，不做 “嚴(yán)格空值檢測(cè)”架谎。
<div *ngIf="hero">
{{hero!.name}}
</div>
語(yǔ)句
模版語(yǔ)句
說(shuō)明
模板語(yǔ)句用來(lái)響應(yīng)由綁定目標(biāo)（如 HTML 元素、組件或指令）觸發(fā)的事件辟躏。
不支持內(nèi)容：
- 操作并賦值（+=谷扣、-=、...）
- 自增捎琐、自減（++会涎、--）
- new 運(yùn)算符
- 位運(yùn)算（| 和 &）
- 模版表達(dá)式運(yùn)算符
- 支持內(nèi)容：
使用
(event)="statement"
語(yǔ)句上下文
語(yǔ)句上下文包括：
模版的$event對(duì)象
模版輸入變量
模版引用變量
模版對(duì)應(yīng)組件類的實(shí)例
注意：模板語(yǔ)句只能引用語(yǔ)句上下文中的成員
模板語(yǔ)句不能引用全局命名空間中的任何東西（比如：window 、document瑞凑、console.log）
