当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > angular4笔记系列之内置指令小结

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

2018年11月26日  | 移动技术网IT编程  | 我要评论

内置指令

内置属性型指令

属性型指令会监听和修改其它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>

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网