對於Angular template syntax的講解

這篇文章主要介紹了對Angular template syntax的講解，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

模板語法簡介

# 1.插值表達式

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

Angular 對所有雙花括號中的表達式求值，把求值的結果轉換成字串，並把它們跟相鄰的字串字面量連接起來。最後，把這個組合出來的插值結果賦給元素或指令的屬性。

表面上看，你在元素標籤之間插入了結果和對標籤的屬性進行了賦值。這樣思考起來很方便，這個誤解很少會帶給你麻煩。但嚴格來講，這是不對的。插值表達式是一個特殊的語法，Angular 把它轉換成了屬性綁定。

等價於

<p [textContent]="interpolate([&#39;Hello&#39;], [name])"></p>

2、模板表達式

模板表達式產生一個值。 Angular 執行這個表達式，並將它賦值給綁定目標的屬性，這個綁定目標可能是 HTML 元素、元件或指令。

輸入屬性的值為常數

<show-title title="Some Title"></show-title>

等價於

<show-title [title]="&#39;Some Title&#39;"></show-title>

輸入屬性的值為變數

<show-title [title]="someTitle"></show-title>

別忘了方括號，方括號告訴Angular 要計算模板表達式。如果忘了加方括號，Angular 會把這個表達式當作字串常數看待，並用該字串來初始化目標屬性，它不會計算這個字串。

模板變數

hero 前的 le​​t 關鍵字建立了一個名叫 hero 的模板輸入變數。 ngFor 指令在由父元件的 heroes 屬性傳回的 heroes 陣列上迭代，每次迭代都從陣列中把目前元素賦值給 hero 變數。

<p *ngFor="let hero of heroes">{{hero.name}}</p>

模版引用變數

模板引用變數通常用來引用模板中的某個 DOM 元素，它也可以引用 Angular 元件或指令或Web Component。使用井號 (#) 來宣告引用變數。 #phone 的意思是宣告一個名叫 phone 的變數來引用 元素，可以在範本中的任何地方引用該範本引用變數。

<input #phone placeholder="phone number">

模板語句

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

<date-picker (dateChanged)="statement()"></date-picker>

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

如何使用Angular-UI Bootstrap元件實作警報的方法

對於vue中config/index.js:配置的詳解

以上是對於Angular template syntax的講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！