Angular2 模板语法精粹之浅出
来源:互联网 发布:苏州大数据产业联盟 编辑:程序博客网 时间:2024/05/17 07:37
承接上一篇文章,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 报错
完美的语法糖
- Angular2 模板语法精粹之浅出
- Angular2 模板语法精粹之深入
- 【Angular2】模板语法之 ngModel
- Angular2 模板语法
- angular2笔记--模板语法
- 前端之Angular2实战:Angular2语法清单
- Angular2入门——(2)模板语法
- angular2系列教程(二)模板语法
- [Angular2] Template Syntax(模板语法)-(2) 企
- Angular2文档学习的知识点摘要——模板语法
- 《C++精粹》之精粹
- JavaScript语言精粹笔记之语法和对象
- vue之模板语法
- Angular2语法快速指南
- angular2的模块语法
- angular2语法总结
- Angular2语法快速指南
- Angular2学习笔记——模板语法——内部指令1
- bitmap加载缩略图
- Java 内存屏障
- 【9-1-4】指针与结构体补充
- 负载均衡(Load Balancing)学习笔记(一)
- [06]CSS 文本样式(下)
- Angular2 模板语法精粹之浅出
- Linux官网下载地址
- 字符编码之间的转换
- Eclipse启动报错:Failed to load the JNI shared library " D:\java\jdk1.8.0\bin\..\jre\bin\server\jvm.dll
- EventBus3.0 传参框架的简单使用
- 指针才是C的精髓
- js与后台交互详述(入门篇)
- Redis的持久化
- Spring学习笔记-C3-Spring装配Bean高级篇