angular 模版變量、模板表達式、模板語句

• 模型-視圖-控制器（MVC）
• 模型-視圖-視圖模型（MVVM）
• Angular 組件至關於 控制器 或 視圖模型
• Angular 模版至關於 視圖

變量

模版輸入變量

<hero-detail *ngFor = "let hero of heroes"
             [hero] = "hero">
</hero-detail>

• let關鍵字建立了一個名叫hero的模板輸入變量
• ngFor指令每次迭代都從數組中把當前元素賦值給hero變量
• 能夠在ngFor的宿主元素（及其子元素）中引用模板輸入變量hero

模版引用變量

• 模板引用變量一般用來引用 模板中的某個DOM元素
• 模板引用變量還能夠用來引用Angular組件、指令 或 Web Component
• 能夠在模板中的任何地方引用模板引用變量

<button #buttonDOM></button>

{{buttonDOM}}

<button ref-buttonDOM></button>

{{buttonDOM}}

[object HTMLButtonElement]

• 模板引用變量的值默認是設置模板引用變量的元素
• 模板引用變量的值也能夠設置爲其它內容的引用（好比表單中引用爲ngForm指令）

<form #myForm="ngForm">

</form>

表達式

插值表達式

說明

插值表達式：在視圖模板中，{{ }}及{{ }}中的內容。

• {{ }}中的內容，稱爲模版表達式
• {{ }}中的內容一般是組建類的屬性或方法
• Angular 對{{ }}中的內容，先求值，再轉成字符串

使用

• 插入HTML標籤內

<p> {{ name }} </p>

• 爲HTML標籤屬性賦值

<img src="{{ imgUrl }}">

模版表達式

說明

模板表達式產生一個值。

模板表達式不支持內容：

• 賦值（=）
• 操做並賦值（+=、-=、...）
• 自增、自減（++、--）
• new 運算符
• 使用; 或 ,的鏈式表達式
• 位運算（| 和 &）

支持內容（模版表達式運算符）：

• |、?.、和 !

使用

• {{ }}中的內容

{{ 1 + 1 }}

• 輸入屬性綁定的值

[property] = "expression"

表達式上下文

表達式上下文 是模版中各類綁定值的來源。

表達式上下文包括（優先級由高到低）：

• 模版輸入變量
• 模版引用變量
• 指令的上下文變量
• 模版對應組建類的實例

注意：

• 模板表達式只能引用表達式上下文中的成員
• 模板表達式不能引用全局命名空間中的任何東西（好比：window 、document、console.log）

模板表達式操做符

管道操做符（|）

管道是一個簡單的函數，它接受一個輸入值，並返回轉換結果。

• 管道操做符會把它左側的表達式結果傳給它右側的管道函數。

安全導航操做符（?.）

• 安全導航操做符用來保護出如今屬性路徑中null和undefined值，保護視圖渲染器，讓它免於失敗。

當person不存在時，下面代碼將報錯，組件視圖將沒法渲染。

{{person.name}}

傳統解決方法：

<ng-container *ngIf="person">
    {{person.name}}
</ng-container>

{{person && person.name}}

安全導航操做符方式：

{{person?.name}}

非空斷言操做符（!）

• 在 TypeScript 2.0 中，能夠使用--strictNullChecks標誌強制開啓嚴格空值檢查。
• 在嚴格空值檢查模式下，若是有未賦值的變量，或者試圖把null或undefined賦值給不容許爲空的變量，類型檢查器就會拋出一個錯誤。
• 在嚴格空值檢查模式下，若是類型檢查器在運行期間沒法肯定一個變量是不是null或undefined，也會拋出一個錯誤。
• 非空斷言操做符（!）用於告訴 TypeScript 的類型檢查器對特定的屬性表達式，不作 "嚴格空值檢測"。

<div *ngIf="hero">
    {{hero!.name}}
</div>

語句

模版語句

說明

模板語句用來響應由綁定目標（如 HTML 元素、組件或指令）觸發的事件。

不支持內容：

• 操做並賦值（+=、-=、...）
• 自增、自減（++、--）
• new 運算符
• 位運算（| 和 &）
• 模版表達式運算符

支持內容：

• 賦值（=）
• 使用; 或 ,的鏈式表達式

使用

• 事件綁定

(event)="statement"

語句上下文

語句上下文包括：

• 模版的$event對象
• 模版輸入變量
• 模版引用變量
• 模版對應組件類的實例

注意：

• 模板語句只能引用語句上下文中的成員
• 模板語句不能引用全局命名空間中的任何東西（好比：window 、document、console.log）