文本插值

組件中的變量：{{data}}
插值表達式：{{1+1}} {{1+getVal()}} 新的模板表達式運算符，例如 |，?. 和 !

<img src="{{itemImageUrl}}"> <p>{{title}}</p> <ul><li *ngFor="let itemof list">{{item.name}}</li> </ul>//結果：Template <script>alert("evil never sleeps")</script> Syntax 瀏覽器不會處理HTML,而是原樣顯示它 <p>{{evilTitle}}</p>public title:string = 'my-project'; public list:any[] = [{name:'jie'},{name:'lei}] public evilTitle:string = 'Template <script>alert("evil never sleeps")</script> Syntax';

不能使用那些具有或可能引發副作用的 JavaScript 表達式，包括：

• 賦值 (=, +=, -=, …)
• 運算符，比如 new、typeof 或 instanceof 等。
• 使用 ; 或 , 串聯起來的表達式
• 自增和自減運算符：++ 和 –
• 一些 ES2015+ 版本的運算符
• 不支持位運算，比如 | 和 &

屬性綁定

Propety綁定

要綁定的屬性將其括在方括號[]內，方括號 [] 使 Angular 將等號的右側看作動態表達式進行求值。如果不使用方括號，等號右側視為字符串字面量

• 可用于綁定標簽自帶的屬性
• 綁定ngclass，改變class值
• 綁定innerHtml，屬性綁定會對<script>標記進行忽略處理，不顯示script標記及包裹的內容
• 在父子組件傳值綁定值

<img [src]="itemImageUrl2"> <tr><td [colSpan]="1 + 1">Three-Four</td></tr>//報錯，不能綁定td自身不存在的屬性 <tr><td [aa]="1 + 1">Three-Four</td></tr><button [disabled]="isUnchanged">Disabled Button</button> <p [ngClass]="classes">blue</p> //class="aa bb" <p [ngClass]="classstr">red</p>//class='red'//結果忽略script標簽及內容：Template Syntax <p [innerHtml]='evilTitle'></p>public classes:string[] = ['aa','bb'] public classstr:string = 'red' public evilTitle:string = 'Template <script>alert("evil never sleeps")</script> Syntax';

Attribute綁定

在Attribute名稱前加上前綴attr.

• 可設置自定義的屬性

//結果：aa='2'<p [attr.aa]='1+1'>123</p>//結果：aria-label='1234'<button [attr.aria-label]="actionName"></button>public actionName:string = '1234'

類綁定

綁定類型語法輸入類型范例輸入值

單一類綁定	[class.sale]=“onSale”	boolean | undefined | null	true, false
多重類綁定	[class]=“classExpression”	string Record<string, boolean | undefined | null Array	“my-class-1 my-class-2” {foo: true, bar: false} [‘foo’, ‘bar’]

綁定到單個class：

要創建單個類綁定，請使用前綴 class 后跟一個點和 CSS 類的名稱。例如 [class.sale]=“onSale”。onSale 為真值時添加類，在表達式為假值時（undefined 除外）刪除類。

//結果：class="scale“ isFlag為true，添加類scale; 如果isFlag為false，class沒有scale<p [class.sale]="isFlag">sale111</p>public isFlag:boolean = true

綁定多個class

要綁定到多個類，請使用 [class] 來設置表達式 - 例如，[class]=“classExpression”

//用空格分隔的類名字符串:class="class1 class2"<p [class]='classSpace'>aaacccc</p>//以類名作為鍵名將真或假表達式作為值的對象: class="foo"<p [class]='classObj'>111</p>//類名的數組 class="bar foo"<p [class]='classArr'>222</p>public classSpace:string = 'class1 class2' public classObj = {foo: true, bar: false} public classArr:string[]=['foo','bar']

綁定到style Attribute

綁定類型語法輸入類型范例輸入值

單一樣式綁定	[style.width]=“width”	string| undefined | null	“100px”
帶單位的單一樣式綁定	[style.width.px]=“width”	number| undefined | null	100
多重樣式綁定	[style]=“styleExpression”	string Record<string, string| undefined | null	“width: 100px; height: 100px” {width: ‘100px’, height: ‘100px’}

單一樣式綁定

可以用中線格式或 駝峰格式編寫樣式 Attribute 名。

//結果：style="width: 100px;" <p [style.width]="'100px'">ww</p>//結果：style="width: 300px;" <p [style.width]="width">ww1</p> //使用駝峰格式，結果：style="margin-top: 40px;" <p [style.marginTop]="showHeader ? '40px' : '0px'">1111</p>//使用中線格式，結果：style="background-color: red;" <nav [style.background-color]="bgColor">222</nav>public width:string = '300px' public showHeader:boolean = true public bgColor:string = 'red'

帶單位的單一樣式綁定

//結果：style="height: 100px; max-height: 50px;" <p [style.height.px]="100" [style.max-height.px]="50">122223</p>

多重樣式綁定

要切換多個樣式，請綁定到 [style] Attribute，例如 [style]=“styleExpression” 。
styleExpression 可以是一個字符串，也可以是一個對象鍵名是樣式名，值為樣式值

//字符串格式，結果：style="color: blue; font-size: 12px;" <p [style]="navStyle">11</p> //對象格式，結果：style="height: 100px; width: 100px;" <p [style]="styleobj">www</p>public navStyle:string = 'font-size: 12px; color: blue;'; public styleobj = {width: '100px', height: '100px'}

[class.foo] ）將優先于不特定 [class] 的綁定， [style.bar] ）將優先于不特定 [style] 的綁定。
綁定會優先于靜態屬性：class 和 [class] 具有相似的特異性，但是 [class] 綁定更優先一些，因為它是動態的

事件綁定

語法：(目標事件名)=模板語句

• 模板語句deleteHero()，出現在 = 號右側的引號中。
• 模板語句解析器特別支持基本賦值 = 和帶有分號 ; 的串聯表達式
• 父子組件通信，父組件綁定自定義事件，子組件觸發事件

<button (click)="deleteHero()">Delete hero</button>//接收模板自己的$event對象用作參數 <button (click)="onSave($event)">Save</button>//接收模板輸入變量item <button *ngFor="let item of list" (click)="deleteHero(item)">{{item.name}}</button>//接收模板引用變量#heroForm <form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>

雙向綁定

雙向綁定語法是屬性綁定和事件綁定的組合的簡寫形式：

• 屬性綁定設置特定的元素屬性
• 事件綁定偵聽元素更改事件

語法：方括號和圓括號的組合 [()] ；其中 [] 進行屬性綁定，() 進行事件綁定。
原理： 父子組件通信

//雙向綁定語法是屬性綁定和事件綁定的組合的簡寫形式 <app-sizer [(size)]="fontSizePx"></app-sizer>//等價與單獨的屬性綁定，事件綁定形式 <app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>

$event 變量包含子組件this.sizeChange.emit(this.size)傳遞的數據。當子組件調用this.sizeChange.emit(this.size)，Angular 將 $event 賦值給 父組件的fontSizePx。

模板引用變量

在模板中使用#來聲明一個模板變量

• 如果在組件上聲明變量，該變量就會引用該組件實例。
• 如果在標準的 HTML 標記上聲明變量，該變量就會引用該元素。
• 如果你在 <ng-template> 元素上聲明變量，該變量就會引用一個 TemplateRef 實例來代表此模板。
• 如果該變量在右側指定了一個名字，比如 #var=“ngModel” ，那么該變量就會引用所在元素上具有這個 exportAs 名字的指令或組件。

//在標準的 HTML 標記上聲明變量，該變量就會引用該元素 <input #phone>{{phone.value}} <button (click)="callPhone(phone.value)">Call</button> //在 <ng-template> 上聲明變量時，該變量就會引用一個 TemplateRef 實例來代表此模板。 <ng-template #ref3></ng-template> <button (click)="log(ref3)">Log type of #ref</button>public log(val:any):void{console.log(val)}

點擊按鈕會打印出一個TemplateRef，如下圖：

模板變量的作用域：

可以在模板中的任何地方引用某個模板變量

而 結構型指令（如 *ngIf 和 *ngFor 或 同樣充當了模板的邊界。

你不能在這些模板邊界之外訪問其中的模板變量。

同名變量在模板中只能定義一次，這樣運行時它的值就是可預測的。

內部模板可以訪問外模板定義的模板變量。從外部的父模板訪問本模板中的變量是行不通的。

對于結構型指令，比如 *ngFor將模板實例化多次，不可能定義出模板變量指向誰

<input #ref1 type="text" [(ngModel)]="firstExample" /> <span *ngIf="true">Value: {{ ref1.value }}</span>//等價于：<input #ref1 type="text" [(ngModel)]="firstExample" /><ng-template [ngIf]="true"><span>Value: {{ ref1.value }}</span> </ng-template>

在這種情況下，有一個包含這個 <span> 的隱式 <ng-template>，而該變量的定義在該隱式模板之外。訪問父模板中的模板變量是可行的，因為子模板會從父模板繼承上下文。

SVG作為模板

你可以在 Angular 應用程序中將 SVG 文件用作模板。當你使用 SVG 作為模板時，就可以像 HTML 模板一樣使用指令和綁定。使用這些功能，你可以動態生成交互式圖形。

//src/app/svg.component.ts import { Component } from '@angular/core';@Component({selector: 'app-svg',templateUrl: './svg.component.svg',styleUrls: ['./svg.component.css'] }) export class SvgComponent {fillColor = 'rgb(255, 0, 0)';changeColor() {const r = Math.floor(Math.random() * 256);const g = Math.floor(Math.random() * 256);const b = Math.floor(Math.random() * 256);this.fillColor = `rgb(${r}, ${g}, $)`;} } //src/app/svg.component.svg <svg><g><rect x="0" y="0" width="100" height="100" [attr.fill]="fillColor" (click)="changeColor()" /><text x="120" y="50">click the rectangle to change the fill color</text></g> </svg>

管道

管道用來對字符串、貨幣金額、日期和其他顯示數據進行轉換和格式化。
管道是一些簡單的函數，可以在模板表達式中用來接受輸入值并返回一個轉換后的值

Angular 為典型的數據轉換提供了內置的管道：
https://angular.cn/api

內置的管道管道名字作用鏈接

DatePipe	date	根據本地環境中的規則格式化日期值	DatePipe
UpperCasePipe	uppercase	把文本全部轉換成大寫
LowerCasePipe	lowercase	把文本全部轉換成小寫
CurrencyPipe	currency	把數字轉換成貨幣字符串，根據本地環境中的規則進行格式化
DecimalPipe	decimal	把數字轉換成帶小數點的字符串，根據本地環境中的規則進行格式化
PercentPipe	percent	把數字轉換成百分比字符串，根據本地環境中的規則進行格式化
SlicePipe (至少一個參數)	slice	截取一個新數組或字符串

在模板表達式中使用管道操作符（|），緊接著是管道的名字。

• 管道參數： （ 要處理的值 | 管道名字：參數值）例如:{{ amount | currency:‘EUR’ }}
• 管道可接受多個參數：用冒號分隔值，例如:{{ amount | currency:‘EUR’:'Euros '}},會把第二個參數Euros 添加到輸出字符串中
• 管道串聯：一個管道的輸出會成為下一個管道的輸入。例如：{{ birthday | date | uppercase}}

//Apr 15, 1988 <p>{{ birthday | date}}</p> //APR 15, 1988 管道串聯把birthday格式化為Apr 15, 1988，再把字母大寫轉化為APR 15, 1988 <p>{{ birthday | date | uppercase}}</p> //04/15/88 傳參格式化日期：月/天/年 <p>{{ birthday | date:"MM/dd/yy" }} </p> //1988-04-15 00:00 <p>{{ birthday | date: 'yyyy-MM-dd HH:mm'}}</p> // €10.00 把amount轉換成歐元 <p>{{ amount | currency:'EUR' }}</p> //Euros 10.00 會把第二個參數Euros 添加到輸出字符串中 <p>{{ amount | currency:'EUR':'Euros '}}</p>//y-project 截取出一個新字符串，從1下標開始到結尾 <p>{{title | slice:1}}</p> //y-pr 從下標1開始到下標5結尾，不包含結尾5 <p>{{title | slice:1:5}}</p>//2,a,5,true 截取出一個新數組，從1下標開始到結尾 <p>{{arr | slice:1}}</p>public birthday = new Date(1988, 3, 15); public amount:number = 10 public title:string = ''my-project public arr:any[] = [1,2,'a',5,true] }

自定義管道

• 使用 @Pipe裝飾器 把一個類標記為一個管道
• 在自定義管道類中實現 PipeTransform 接口來執行轉換。
  Angular 調用 transform 方法，該方法使用綁定的值作為第一個參數，把其它任何參數都以列表的形式作為第二個參數，并返回轉換后的值。

//exponential-strengthPipe.pipe.ts import { Pipe, PipeTransform } from '@angular/core'; /*指數級轉換，比如2的10次方轉換為1024* 參數：value* exponent默認為1** 格式:* {{ value | exponentialStrength:exponent}}* formats to: 1024 */ @Pipe({name: 'exponentialStrength'}) export class ExponentialStrengthPipe implements PipeTransform {transform(value: number, exponent = 1): number {return Math.pow(value, exponent);} }//1024 例子 <p> {{2 | exponentialStrength: 10}}</p>

總結

以上是生活随笔為你收集整理的angular 模板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。