Angular4 - 模板文法 1. 模板文法的介紹 HTML 是 Angular 模板的語言。幾乎所有的HTML文法都是有效模板文法。 但值得注意的例外是<script>元素，它被禁用了，以阻止指令碼插入式攻擊的風險。（實際上，<script>只是被忽略了。）
有些合法的 HTML 被用在模板中是沒有意義的。<html>、<body>和<base>元素這個舞台上中並沒有扮演有用的角色。剩下的所有元素基本上就都一樣用了。這些元素存在於index.html中。
可以通過組件和指令來擴充模板中的 HTML 詞彙。它們看上去就是新元素和屬性。
那麼模板文法是什麼呢。
對於一個簡單的html代碼，我們可以在頁面內配置css屬性，綁定事件，設計element元素的位置達到我們想要的結果。以此類推到Angular模板中來說。模板文法規定了以下內容（自我總結）：
*規定了html詞彙（script被忽略，html，body,base沒有意義，擴充指令和組件）
*擴充插值運算式和擴充模板運算式
*擴充了綁定文法（規定了屬性綁定，事件綁定的文法以及雙向繫結內容）
*模板引用變數 (請查看組件章節)
*Angular內建指令 （本章不會講解，後續指令文章會有說明）
*Angular自訂指令 （本章不會講解，後續指令文章會有說明）
總而言之，模板文法是規定了我們操作template內容以達到我們想要的結果
2. 插值運算式和模板運算式 (1) 插值運算式 {{}}稱為插值運算式，可以將當前組件控制器中的公有變數直接取值然後顯示其值。
I am {{employee.name}}
//angular.component.tsexport class AngularComponent implements OnInit { public employee: Employee = { name: 'rodchen', company: 'aug' } constructor() { } ngOnInit(): void { }}插值運算式還可以將計算過的字串插入到HTML元素標籤內或對標籤的屬性進行賦值
<h3> {{title}} <img src="{{heroImageUrl}}" style="height:30px"></h3>
(2) 模板運算式 模板運算式產生一個值。 Angular執行這個運算式，並把它賦值給繫結目標的屬性，這個繫結目標可能是 HTML 元素、組件或指令
<p>The sum of 1 + 1 is {{1 + 1}}</p>也可以是調用宿主組件的方法
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>模板運算式看起來javascript運算式，但是是有一些規定：
I am {{employee.name | uppercase}} //I am RODCHEN具體用法可以參照 pipe，後面也會有專門的文章去學習。
TypeError: Cannot read property 'name' of null in [null].這時我們就可以使用安全導航操作符來規避這個錯誤。
I am {{employee?.name | uppercase}}
c) 非空斷言操作符（!） 如果類型檢查器在運行期間無法確定一個變數是null或undefined，那麼它也會拋出一個錯誤。 我們自己可能知道它不會為空白，但類型檢查器不知道。 所以我們要告訴類型檢查器，它不會為空白，這時就要用到非空斷言操作符。
src/app/app.component.html content_copy<!--No hero, no text --><div *ngIf="hero"> The hero's name is {{hero!.name}}</div>在 Angular 編譯器把你的模板轉換成 TypeScript 代碼時，這個操作符會防止 TypeScript 報告 "hero.name可能為null或undefined"的錯誤。
<h3> {{title}} <img src="{{heroImageUrl}}" style="height:30px"></h3>表面上看，我們在元素標籤之間插入了結果和對標籤的屬性進行了賦值。 這樣思考起來很方便，並且這個誤解很少給我們帶來麻煩。 但嚴格來講，這是不對的。插值運算式是一個特殊的文法，Angular 把它轉換成了屬性綁定。屬性綁定後面會說到。
<input type="text" value="name" (input)="onPut($event)">
import {Component, OnInit} from '@angular/core';@Component({ selector: 'app-angular', templateUrl: './angular.component.html', styleUrls: ['./angular.component.css']})export class AngularComponent implements OnInit { constructor() { } ngOnInit(): void { } onPut(event) { console.log('DOM 屬性： ' + event.target.value); console.log('HTML 屬性： ' + event.target.getAttribute('value')); }}如下圖所示，我們可以看到隨著我們的輸入，DOM屬性會變化，但是html屬性不會發生變化。
<button disabled>點擊</button>當前這個button是不可以點擊的，因為出現了disabled屬性。
<button disabled="false">點擊</button>當我將disables(html屬性)設定為false，這個button還是不可以的。添加或刪除disabled attribute會禁用或啟用這個按鈕。但 attribute 的值無關緊要，這就是我們為什麼沒法通過 <button disabled="false">仍被禁用</button>這種寫法來啟用按鈕。
<button [disabled]="false">點擊</button>模板綁定是通過 property 和事件來工作的，而不是 attribute。在 Angular 的世界中，attribute 唯一的作用是用來初始化元素和指令的狀態。 當進行資料繫結時，只是在與元素和指令的 property 和事件打交道，而 attribute 就完全靠邊站了。
{{employee.name}}
b) 屬性綁定（DOM屬性綁定）
//[target]="expression"<input type="text" [value]="name" />有些人喜歡用bind-首碼的可選形式，並稱之為規範形式：
<input type="text" bind-value="name" />屬性綁定還是插值運算式。
<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p><p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>當要渲染的資料類型是字串時，沒有技術上的理由證明哪種形式更好。 我們傾向於可讀性，所以傾向於插值運算式。 建議建立代碼風格規則，選擇一種形式， 這樣，既遵循了規則，又能讓手頭的任務做起來更自然。但資料類型不是字串時，就必須使用屬性綁定了。
[attr.target]="expression"可以通過attribute 綁定來直接設定 attribute 的值。
<tr><td colspan="{{ 1 + 1 }}">One-Two</td></tr>
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>d) CSS 類綁定 藉助 CSS 類綁定，可以從元素的class attribute 上添加和移除 CSS 類名。CSS 類綁定綁定的文法與屬性綁定類似。 但方括弧中的部分不是元素的屬性名稱，而是由class首碼，一個點 (.)和 CSS 類的名字組成， 其中後兩部分是可選的。形如：[class.class-name]。
.color-class { color: red;}
<div> <div class="color-class"> <p>Test the css class bind</p> </div></div>此時頁面上的文字為紅顏色。
<div> <div class="color-class" [class]="className"> <p>Test the css class bind</p> </div></div>這樣的話就設定[class]上的類名到div上，class="color-class"會被替換掉。這種方式顯得太暴力了點，可能我只想操作某一個class。那麼可以使用下面的方式。可以綁定到特定的類名。 當模板運算式的求值結果是真值時，Angular 會添加這個類，反之則移除它。
<div [class.special]="isSpecial">The class binding is special</div>還有一個ngClass內建指令，等到指令篇章學習。
[style.style-property]樣式綁定的文法與屬性綁定類似。 但方括弧中的部分不是元素的屬性名稱，而由style首碼，一個點 (.)和 CSS 樣式的屬性名稱組成。
<button [style.color]="isSpecial ? 'red': 'green'">Red</button><button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>有些樣式綁定中的樣式帶有單位。在這裡，以根據條件用 “em” 和 “%” 來設定字型大小的單位。
<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button><button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>還有一個ngStyle內建指令，等到指令篇章學習。
(target)="statement"圓括弧中的名稱 —— 比如(click) —— 標記出目標事件。在下面例子中，目標是按鈕的 click 事件。
<button (click)="onSave()">Save</button>有些人更喜歡帶on-首碼的備選形式，稱之為規範形式：
<button on-click="onSave()">On Save</button>b) $event 和事件處理語句 綁定會通過名叫$event的事件對象傳遞關於此事件的資訊（包括資料值）。
<button (click)="onSave($event)">Save</button>c) EventEmitter自訂事件 令使用 Angular EventEmitter 來觸發自訂事件。 指令建立一個EventEmitter執行個體，並且把它作為屬性暴露出來。 指令調用EventEmitter.emit(payload)來觸發事件，可以傳入任何東西作為訊息載荷。 父指令通過綁定到這個屬性來監聽事件，並通過$event對象來訪問。詳情可以查看Output.
//step.component.html<div> <button (click)="dec()" title="smaller">-</button> <button (click)="inc()" title="bigger">+</button> <label [style.font-size.px]="size">FontSize: {{size}}px</label></div>
//step.component.tsimport {Component, EventEmitter, HostListener, Input, Output} from '@angular/core';@Component({ selector: 'app-step', templateUrl: './step.component.html', styleUrls: ['./step.component.css']})export class StepComponent { @Input() size: number; @Output() sizeChange = new EventEmitter<number>(); dec() { this.resize(- 1); } inc() { this.resize(+ 1); } resize(delta: number) { this.size = Math.min(40, Math.max(8, + this.size + delta)); this.sizeChange.emit(this.size); }}
//angular.component.html<app-step [(size)]="fontSizePx"></app-step><div [style.font-size.px]="fontSizePx">Resizable Text</div>
//angular.compoent.tsimport {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';import {Employee} from './angular.module';@Component({ selector: 'app-angular', templateUrl: './angular.component.html', styleUrls: ['./angular.component.css'],})export class AngularComponent { public fontSizePx: number = 12; constructor() { }}StepComponent: size的初始值是一個輸入值，來自屬性綁定。（譯註：注意size前面的@Input） 點擊按鈕，在最小/最大值範圍限制內增加或者減少size。 然後用調整後的size觸發sizeChange事件。
<input [(ngModel)]="currentHero.name">回頭看看name綁定，注意，你可以通過分別綁定到<input>元素的value屬性和input事件來達到同樣的效果。
<input [value]="currentHero.name" (input)="currentHero.name=$event.target.value" >那樣顯得很笨重，誰會記得該設定哪個元素屬性以及當使用者修改時觸發哪個事件。 你該如何提取輸入框中的文本並且更新資料屬性。誰會希望每次都去查資料來確定這些。
<input [ngModel]="currentHero.name" (ngModelChange)="currentHero.name=$event">ngModel輸入屬性會設定該元素的值，並通過ngModelChange的輸出屬性來監聽元素值的變化。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
