承接上一篇文章,Angular2 模板语法精粹之深入,这篇文章主要介绍了 angular2 内置的一些常用模板语法,看完这篇的内容,可以很快的使用内置指令和语法,构建出常用的组件模板,完成工作中大部分的需求逻辑
常用内置指令
NgClass
private classes = {
active: this.isActive,
change: this.isChanged
}
// template
<div [ngClass]="classes"></div>
NgClass 接收一个对象,key 为 class 名字,value: boolean 如果为 true,则目标元素会添加这个 class ,为 false 目标元素会移除这个 class
NgStyle
private styles = {
'color': this.isRed? 'red': 'green',
'font-size': this.isTitle? '24px': '12px'
}
// template
<div [ngStyle]="styles"></div>
NgStyle 接收一个对象,key 为样式名称,value 为样式值
NgIf
结构指令
<hero-detail *ngIf="isActive"></hero-detail>
从 DOM 树中移除或添加元素,根据指令接收到的 boolean 值
NgSwitch
<span [ngSwitch]="toeChoice">
<span *ngSwitchCase="'Kevin'">Kevin</span>
<span *ngSwitchCase="'Loch'">Loch</span>
<span *ngSwitchDefault>other</span>
</span>
父指令绑定了开关的值,任何情况下,只有一个开关 case 会被显示出来
NgFor
<div *ngFor="let hero of heroes">{{hero.fullName}}</div>
上下文中多了 hero,相当于在子作用域
let hero of heroes
是 angular 自己解释的微语法
<div *ngFor="let hero fo heroes; let i=index">{{i+1}}</div>
最小更新代价,为了避免 heroes 数组中的微小改动,导致整个列表的重构与重绘,可以制定一个追踪函数,作为是否需要重构的标准
trackByHeroes(index: number, hero: Hero) { return hero.id }
<div *ngFor="let hero of heroes; trackBy: trackByHeroes">...</div>
追踪函数中的 id 并不会影响该 id 下属性变化导致的重写,如果相同 id 下英雄的名字发生变化,DOM 同样会更新
模版引用变量
模版引用变量是模版中对 DOM 元素或指令的引用
可以在同一元素、兄弟元素或任何子元素中使用模版引用变量
<input #phone />
<button (click)="callPhone(phone.value)"></button>
<input ref-phone />
<button (click)="callPhone(phone.value)"></button>
上面是定义模版引用变量的两种形式,#phone 在这里都是原生的 HTMLInputElement
NgForm
<form (ngSubmit)="onSubmit(theForm)" #theForm="ngForm">
<button [disabled]="!theForm.form.valid">...</button>
</form>
这里的 theForm 是一个 NgForm 的实例,包装了原生的 HTMLFormElement,扩展了更多的功能
输入与输出属性
对于目标,分为输入与输出属性
<hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)"></hero-detail>
@Input() hero: Hero;
@Output() deleteRequest = new EventEmitter<Hero>();
想了一个很好理解的比喻
[hero] 是一吃货,他把 currentHero 吃到了指令内部
(deleteRequest) 喝多了,他把 $event 吐给了 deleteHero() (作为参数),同时惹恼了 deleteHero(触发了事件)
模版表达式操作符
管道符
<div>{{title | uppercase }}</div>
管道操作符会把左侧表达式的结果传递给右侧的管道函数
安全导航操作符(可选符)?.
{{currentHero?.firstName}}
// 放置currentHero null || undefined 报错
完美的语法糖
**
前行的路上,感谢您的鼓励!!
**