文本插值
组件中的变量：{{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] 绑定更优先一些，因为它是动态的
模板引用变量
模板引用变量 #customerInput
<input #customerInput>{{customerInput.value}}
事件绑定
模板语句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>
管道
管道用来对字符串、货币金额、日期和其他显示数据进行转换和格式化。
管道是一些简单的函数，可以在模板表达式中用来接受输入值并返回一个转换后的值
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>
|