模板语法简介
插值表达式
<div>Hello {{name}}</div>
等价于
<div [textContent]="interpolate(['Hello'],[name])"></div>
模板表达式
属性绑定
输入属性的值为常量
<show-title title="Some Title"></show-title>
等价于
<show-title [title]="'Some Title'"></show-title>
<show-title [title]="title"></show-title>
等价于
<show-title bind-title="title"></show-title>
事件绑定
<date-picker (dateChanged)="statement()"></date-picker>
等价于
<date-picker on-dateChanged="statement()"></date-picker>
模板引用变量
<video-player #player></video-player> <button (click)="player.pause()">Pause</button>
等价于
<video-player ref-player></video-player>
双向绑定
<input [ngModel]="todo.text" (ngModelChange)="todo.text=$event">
等价于
<input [(ngModel)]="todo.text">
*
与 <template>
*ngIf
<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>
最终转换为
<template [ngIf]="currentHero"> <hero-detail [hero]="currentHero"></hero-detail> </template>
*ngFor
<hero-detail *ngFor="let hero of heroes; trackBy:trackByHeroes" [hero]="hero"> </hero-detail>
最终转换为
<template ngFor let-hero [ngForOf]="heroes" [ngForTrackBy]="trackByHeroes"> <hero-detail [hero]="hero"></hero-detail> </template>
常用指令简介
NgIf
<div *ngIf="false"></div> <!-- never displayed --> <div *ngIf="a > b"></div> <!-- displayed if a is more than b --> <div *ngIf="str == 'yes'"></div> <!-- displayed if str holds the string "yes" --> <div *ngIf="myFunc()"></div> <!-- displayed if myFunc returns a true value -->
NgSwitch
有时候需要根据不同的条件,渲染不同的元素,此时我们可以使用多个 ngIf
来实现。
<div class="container"> <div *ngIf="myVar == 'A'">Var is A</div> <div *ngIf="myVar == 'B'">Var is B</div> <div *ngIf="myVar != 'A' && myVar != 'B'">Var is something else</div> </div>
如果 myVar
的可选值多了一个 'C'
,就得相应增加判断逻辑:
<div class="container"> <div *ngIf="myVar == 'A'">Var is A</div> <div *ngIf="myVar == 'B'">Var is B</div> <div *ngIf="myVar == 'C'">Var is C</div> <div *ngIf="myVar != 'A' && myVar != 'B' && myVar != 'C'"> Var is something else </div> </div>
可以发现 Var is something else
的判断逻辑,会随着 myVar
可选值的新增,变得越来越复杂。遇到这种情景,我们可以使用 ngSwitch
指令。
<div class="container" [ngSwitch]="myVar"> <div *ngSwitchCase="'A'">Var is A</div> <div *ngSwitchCase="'B'">Var is B</div> <div *ngSwitchCase="'C'">Var is C</div> <div *ngSwitchDefault>Var is something else</div> </div>
NgStyle
NgStyle 让我们可以方便得通过 Angular 表达式,设置 DOM 元素的 CSS 属性。
设置元素的背景颜色
<div [style.background-color="'yellow'"]> Use fixed yellow background </div>
设置元素的字体大小
<!-- 支持单位: px | em | %--> <div> <span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize"> red text </span> </div>
NgStyle 支持通过键值对的形式设置 DOM 元素的样式:
<div [ngStyle]="{color: 'white','background-color': 'blue'}"> Uses fixed white text on blue background </div>
注意到 background-color
需要使用单引号,而 color
不需要。这其中的原因是,ng-style
要求的参数是一个 Javascript
对象,color
是一个有效的 key
,而 background-color
不是一个有效的 key
,所以需要添加 ''
。
NgStyle 源码片段
@Directive({selector: '[ngStyle]'}) export class NgStyle implements DoCheck { private _ngStyle: {[key: string]: string}; private _differ: KeyValueDiffer<string,string|number>; constructor( private _differs: KeyValueDiffers,private _ngEl: ElementRef,private _renderer: Renderer) {} @Input() set ngStyle(v: {[key: string]: string}) { // <div [ngStyle]="{color: 'white','background-color': 'blue'}"> this._ngStyle = v; if (!this._differ && v) { this._differ = this._differs.find(v).create(); } } // 设置元素的样式 private _setStyle(nameAndUnit: string,value: string|number): void { const [name,unit] = nameAndUnit.split('.'); // 截取样式名和单位 value = value != null && unit ? `${value}${unit}` : value; this._renderer.setElementStyle(this._ngEl.nativeElement,name,value as string); } }
NgClass
NgClass 接收一个对象字面量,对象的 key
是 CSS class 的名称,value
的值是 truthy/falsy
的值,表示是否应用该样式。
CSS Class
.bordered { border: 1px dashed black; background-color: #eee; }
HTML
<!-- Use boolean value --> <div [ngClass]="{bordered: false}">This is never bordered</div> <div [ngClass]="{bordered: true}">This is always bordered</div> <!-- Use component instance property --> <div [ngClass]="{bordered: isBordered}"> Using object literal. Border {{ isBordered ? "ON" : "OFF" }} </div> <!-- Class names contains dashes --> <div[ngClass]="{'bordered-Box': false}"> Class names contains dashes must use single quote </div> <!-- Use a list of class names --> <div class="base" [ngClass]="['blue','round']"> This will always have a blue background and round corners </div>
NgFor
NgFor 指令用来根据集合(数组) ,创建 DOM
元素,类似于 ng1
中 ng-repeat
指令
<div class="ui list" *ngFor="let c of cities; let num = index"> <div class="item">{{ num+1 }} - {{ c }}</div> </div>
使用 trackBy
提高列表的性能
@Component({ selector: 'my-app',template: ` <ul> <li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li> </ul> <button (click)="getItems()">Refresh items</button> `,}) export class App { constructor() { this.collection = [{id: 1},{id: 2},{id: 3}]; } getItems() { this.collection = this.getItemsFromServer(); } getItemsFromServer() { return [{id: 1},{id: 3},{id: 4}]; } trackByFn(index,item) { return index; // or item.id } }
NgNonBindable
ngNonBindable 指令用于告诉 Angular 编译器,无需编译页面中某个特定的HTML代码片段。
<div class='ngNonBindableDemo'> <span class="bordered">{{ content }}</span> <span class="pre" ngNonBindable> ← This is what {{ content }} rendered </span> </div>
Angular 4.x 新特性
If...Else Template Conditions
语法
<element *ngIf="[condition expression]; else [else template]"></element>
使用示例
<ng-template #hidden> <p>You are not allowed to see our secret</p> </ng-template> <p *ngIf="shown; else hidden"> Our secret is being happy </p>
<template>
—> <ng-template>
使用示例
import { Component,OnInit } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/of'; import 'rxjs/add/operator/delay'; @Component({ selector: 'exe-app',template: ` <ng-template #fetching> <p>Fetching...</p> </ng-template> <p *ngIf="auth | async; else fetching; let user"> {{user.username }} </p> `,}) export class AppComponent implements OnInit { auth: Observable<{}>; ngOnInit() { this.auth = Observable .of({ username: 'semlinker',password: 'segmentfault' }) .delay(new Date(Date.now() + 2000)); } }
我有话说
使用 [hidden]
属性控制元素可见性存在的问题
<div [hidden]="!showGreeting"> Hello,there! </div>
上面的代码在通常情况下,都能正常工作。但当在对应的 DOM 元素上设置 display: flex
属性时,尽管[hidden]
对应的表达式为 true
,但元素却能正常显示。对于这种特殊情况,则推荐使用 *ngIf
。
直接使用 DOM
API 获取页面上的元素存在的问题
@Component({ selector: 'my-comp',template: ` <input type="text" /> <div> Some other content </div> ` }) export class MyComp { constructor(el: ElementRef) { el.nativeElement.querySelector('input').focus(); } }
以上的代码直接通过 querySelector()
获取页面中的元素,通常不推荐使用这种方式。更好的方案是使用 @ViewChild
和模板变量,具体示例如下:
@Component({ selector: 'my-comp',template: ` <input #myInput type="text" /> <div> Some other content </div> ` }) export class MyComp implements AfterViewInit { @ViewChild('myInput') input: ElementRef; constructor(private renderer: Renderer) {} ngAfterViewInit() { this.renderer.invokeElementMethod( this.input.nativeElement,'focus'); } }
另外值得注意的是,@ViewChild()
属性装饰器,还支持设置返回对象的类型,具体使用方式如下:
@ViewChild('myInput') myInput1: ElementRef; @ViewChild('myInput',{read: ViewContainerRef}) myInput2: ViewContainerRef;
若未设置 read
属性,则默认返回的是 ElementRef
对象实例。