Angular 模板
什么是模板
???????在 Angular 中，組件扮演著控制器或視圖模型的角色，模板則扮演視圖的角色。模板是一種自定義的標(biāo)準(zhǔn)化頁(yè)面，通過(guò)模板和模板中的數(shù)據(jù)結(jié)合，可以生產(chǎn)各種各樣的網(wǎng)頁(yè)。在Angular中，模板的默認(rèn)語(yǔ)言是HTML，幾乎所有的HTML語(yǔ)法在模板中都是適用的，但<script>標(biāo)簽是被禁止的，主要是為了防止JavaScript腳本注入攻擊（XXS）。同時(shí)一些HTML元素在模板中并不起什么作用，比如<html>、<body>、<base>等。除此之外，Angular中可以通過(guò)組件和指令對(duì)模板的HTML元素進(jìn)行擴(kuò)展，這些擴(kuò)展將以新的元素或?qū)傩缘男问匠霈F(xiàn)。
模板表達(dá)式
???????模板表達(dá)式類似于JavaScript語(yǔ)言的表達(dá)式，絕大部分的JavaScript表達(dá)式都是合法的模板表達(dá)式。模板表達(dá)式應(yīng)用在插值語(yǔ)法的雙大括號(hào)中和屬性綁定“=”右側(cè)的引號(hào)中。Angular會(huì)執(zhí)行這個(gè)表達(dá)式并將值分配給一個(gè)綁定目標(biāo)的屬性，這個(gè)綁定目標(biāo)可能是一個(gè)HTML元素、組件或者指令。
注意不能為一下幾種情況：
- 帶有new運(yùn)算符的表達(dá)式。
- 賦值表達(dá)式（=、+=、-=）等。
- 帶有;或者,的鏈?zhǔn)奖磉_(dá)式。
- 帶有自增和自減操作（++/--）的表達(dá)式
- 不支持位運(yùn)算符（| 和&）
還能使用三元表達(dá)式
<p [style.color]="isColor ? 'blue' : 'black'">daocheng</p>
語(yǔ)法大全
數(shù)據(jù)綁定
Angular中不論是從組件控制器中的屬性綁定到模板上，還是從模板中的事件反映到控制器中，它們都默認(rèn)是單向的。
1.插值表達(dá)式
語(yǔ)法：{{ }}，也是單向綁定
2.事件綁定
數(shù)據(jù)從模板流向組件類。在事件綁定中，Angular通過(guò)監(jiān)聽(tīng)用戶操作事件，比如鍵盤事件、鼠標(biāo)事件等來(lái)執(zhí)行其對(duì)應(yīng)綁定的方法。事件綁定的語(yǔ)法是由“=”左側(cè)小括號(hào)內(nèi)的目標(biāo)事件和“=”右側(cè)引號(hào)中的目標(biāo)語(yǔ)句組成。示例 (click)=”onClick”
類型
- 綁定自定義事件。場(chǎng)景：子組件@Output發(fā)射出來(lái)的事件。
- DOM原生事件。事件一覽表：https://developer.mozilla.org/zh-CN/docs/Web/Events
3.屬性綁定
在學(xué)習(xí)屬性綁定前先來(lái)了解一對(duì)非常重要的概念，即DOM對(duì)象屬性（Property）與HTML標(biāo)簽特性（Attribute）。在英語(yǔ)中Property和Attribute都可以譯為‘屬性’，名字雖然相同，但在模板中意義卻大有不同。
兩者的區(qū)別和聯(lián)系還體現(xiàn)在以下兩個(gè)方面：
- 大多數(shù)情況下，DOM對(duì)象屬性與HTML標(biāo)簽特性并不是一一對(duì)應(yīng)的，但有少量屬性即是DOM對(duì)象屬性又是HTML標(biāo)簽特性，如id、title、class等。
- 通常HTML標(biāo)簽特性代表初始值，初始化以后就不發(fā)生改變，而DOM元素對(duì)象屬性代表當(dāng)前值，其默認(rèn)為初始值但是會(huì)隨著改變。
實(shí)際的使用：大多數(shù)情況我們都是綁定DOMProperty屬性，而有些特例你只能綁定attr（colspan，我們table中的標(biāo)簽屬性）[attr.colspan]
4.雙向數(shù)據(jù)綁定
我們經(jīng)常需要顯示數(shù)據(jù)屬性，并在用戶作出更改時(shí)更新該屬性。
在元素層面上，既要設(shè)置元素屬性，又要監(jiān)聽(tīng)元素事件變化。
Angular 為此提供一種特殊的雙向數(shù)據(jù)綁定語(yǔ)法：[(x)]。 [(x)]語(yǔ)法結(jié)合了屬性綁定的方括號(hào)[x]和事件綁定的圓括號(hào)(x)。
原理：
一個(gè) @Input xxx 加上 @Output xxxChange，構(gòu)成 [( xxx )];
5.模板引用變量
模板引用變量通常用來(lái)引用模板中的某個(gè)DOM元素，它還可以引用Angular組件或指令或Web Component。示例：使用井號(hào) (#) 來(lái)聲明引用變量。也可以使用ref-前綴代替。
6.模板表達(dá)式操作符
- 管道操作符 ( | )
- 安全導(dǎo)航操作符 ( ?. ) 和空屬性路徑
- 非空斷言操作符 ( ！ ) //需要特點(diǎn)的場(chǎng)景
管道
在Angular中，管道（Pipes）可以按照開(kāi)發(fā)者指定的規(guī)則將模板內(nèi)的數(shù)據(jù)進(jìn)行轉(zhuǎn)換。如日期類型（Date），默認(rèn)會(huì)顯示為Mon Sep 18 2017 17:16:11 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)這樣的形式，但不如Sep 18,2017這樣的形式直觀，此時(shí)可以借助管道來(lái)實(shí)現(xiàn)這種轉(zhuǎn)換效果。
1. 管道介紹
使用管道，需要用管道操作符 | 來(lái)連接模板表達(dá)式中左邊的輸入數(shù)據(jù)和右邊的管道，示例：{{birthday | date }}
2.管道參數(shù)
管道可以使用參數(shù)，示例：
{{birthday | date:”y/MM/dd” }} 通過(guò)傳入的參數(shù)來(lái)輸出不同格式的數(shù)據(jù)
y代表年， M代表月份，d代表天， H代表小時(shí)，m代表分鐘，s代表秒
3.鏈?zhǔn)焦艿?/h5>
一個(gè)模板表達(dá)式可以連續(xù)使用多個(gè)管道進(jìn)行不同的處理，這就是鏈?zhǔn)焦艿馈Ｊ褂面準(zhǔn)焦艿揽梢哉故靖S富的數(shù)據(jù)格式，語(yǔ)法格式如下所示:
{{birthday | date| uppercase}}
4.常用內(nèi)置管道
1.DatePipe ( 用來(lái)格式化一個(gè)日期數(shù)據(jù) )
2.JsonPipe ( 通過(guò)JSON.stringify()來(lái)將輸入數(shù)據(jù)對(duì)象轉(zhuǎn)換成對(duì)象字符串，主要用于開(kāi)發(fā)調(diào)試。示例：{{jsonObject | json }} )
3.DecimalPipe ( 用于對(duì)數(shù)值的整數(shù)與小數(shù)部分按照指定規(guī)則進(jìn)行格式化，這種格式化方式也稱為本地格式化處理，示例：
expression| number[: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}]
)
4.內(nèi)置管道全家福：( linkhttps://www.angular.cn/api?type=pipe )
5.自定義管道
雖然Angular提供了許多內(nèi)置的管道，但是數(shù)據(jù)轉(zhuǎn)換涉及各種各樣的格式，內(nèi)置管道顯然無(wú)法滿足全部需求，因此我們需要使用Angular提供的自定義管道功能來(lái)實(shí)現(xiàn)更多的需求。
命令：ng g p xxx
步驟：
- 新建一個(gè)pipe， ng g p sexreform
- Angular就會(huì)在根模塊中進(jìn)行處理。
- 實(shí)現(xiàn)一個(gè)transform的方法，第一個(gè)參數(shù)是被管道的值，第二個(gè)參數(shù)是我們的管道參數(shù)（可選）。需要返回被處理完之后的值
注意：
- @Pipe裝飾器裝飾的。
- name元數(shù)據(jù)的值決定了管道的使用名稱。
- ==管道并不會(huì)改變?cè)紨?shù)據(jù)的值，只是進(jìn)行了一個(gè)格式化==
6.管道分類
==純管道==：Angular只有在它檢測(cè)到輸入值發(fā)生了純變更時(shí)才會(huì)執(zhí)行純管道。純變更是指對(duì)原始類型值(String、Number、Boolean、Symbol)的更改，或者對(duì)對(duì)象引用(Date、Array、Function、Object)的更改。
==非純管道==：Angular會(huì)在每個(gè)組件的變更檢測(cè)周期中執(zhí)行非純管道。非純管道可能會(huì)被調(diào)用很多次，和每個(gè)按鍵或每次鼠標(biāo)移動(dòng)一樣頻繁。示例：| async（Rxjs中會(huì)提到）
一個(gè)模板表達(dá)式可以連續(xù)使用多個(gè)管道進(jìn)行不同的處理，這就是鏈?zhǔn)焦艿馈Ｊ褂面準(zhǔn)焦艿揽梢哉故靖S富的數(shù)據(jù)格式，語(yǔ)法格式如下所示:
{{birthday | date| uppercase}}
1.DatePipe ( 用來(lái)格式化一個(gè)日期數(shù)據(jù) )
2.JsonPipe ( 通過(guò)JSON.stringify()來(lái)將輸入數(shù)據(jù)對(duì)象轉(zhuǎn)換成對(duì)象字符串，主要用于開(kāi)發(fā)調(diào)試。示例：{{jsonObject | json }} )
3.DecimalPipe ( 用于對(duì)數(shù)值的整數(shù)與小數(shù)部分按照指定規(guī)則進(jìn)行格式化，這種格式化方式也稱為本地格式化處理，示例：
expression| number[: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}]
)
4.內(nèi)置管道全家福：( linkhttps://www.angular.cn/api?type=pipe )
5.自定義管道
雖然Angular提供了許多內(nèi)置的管道，但是數(shù)據(jù)轉(zhuǎn)換涉及各種各樣的格式，內(nèi)置管道顯然無(wú)法滿足全部需求，因此我們需要使用Angular提供的自定義管道功能來(lái)實(shí)現(xiàn)更多的需求。
命令：ng g p xxx
步驟：
注意：
6.管道分類
==純管道==：Angular只有在它檢測(cè)到輸入值發(fā)生了純變更時(shí)才會(huì)執(zhí)行純管道。純變更是指對(duì)原始類型值(String、Number、Boolean、Symbol)的更改，或者對(duì)對(duì)象引用(Date、Array、Function、Object)的更改。
==非純管道==：Angular會(huì)在每個(gè)組件的變更檢測(cè)周期中執(zhí)行非純管道。非純管道可能會(huì)被調(diào)用很多次，和每個(gè)按鍵或每次鼠標(biāo)移動(dòng)一樣頻繁。示例：| async（Rxjs中會(huì)提到）
