angular4笔记系列之内置指令小结

内置指令

内置属性型指令

属性型指令会监听和修改其它html元素或组件的行为、元素属性（attribute）、dom属性（property）。

ngclass

形式：[ngclass]="statement"

通过绑定到ngclass，可以同时添加或移除多个类。

setcurrentclasses() {
 this.currentclasses = {
  'saveable': this.cansave,
  'modified': !this.isunchanged,
  'special': this.isspecial
 };
}

<div [ngclass]="currentclasses">this div</div>

ngstyle

形式：[ngstyle]="statement"

ngstyle绑定可以同时设置多个内联样式。

setcurrentstyles() {
 this.currentstyles = {
  'font-style': this.cansave   ? 'italic' : 'normal',
  'font-weight': !this.isunchanged ? 'bold'  : 'normal',
  'font-size':  this.isspecial  ? '24px'  : '12px'
 };
}

<div [ngstyle]="currentstyles">this div</div>

ngmodel

形式：[(ngmodel)]="statement"

使用[(ngmodel)]双向绑定到表单元素。

<input [(ngmodel)]="currenthero.name">

使用 ngmodel 时需要 formsmodule

内置结构型指令

ngif

形式：*ngif="statement"

<app-hero-detail *ngif="isactive"></app-hero-detail>

ngfor

形式：*ngfor="statement"

<div *ngfor="let hero of heroes">{{hero.name}}</div>

ngswitch

形式：[ngswitch]="statement"

<div [ngswitch]="currenthero.emotion">
 <app-happy-hero *ngswitchcase="'happy'" [hero]="currenthero"></app-happy-hero>
 <app-sad-hero *ngswitchcase="'sad'" [hero]="currenthero"></app-sad-hero>
 <app-unknown-hero *ngswitchdefault [hero]="currenthero"></app-unknown-hero>
</div>

ngswitch实际上包括三个相互协作的指令：ngswitch、ngswitchcase 和 ngswitchdefault

模板引用变量 ( #var )

模板引用变量通常用来引用模板中的某个dom元素，它还可以引用angular组件或指令或web component。

<input #phone placeholder="phone number">

<button (click)="callphone(phone.value)">call</button>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。