欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-05 14:41:24
内置指令 内置属性型指令 属性型指令会监听和修改其它html元素或组件的行为、元素属性(attribute)、dom属性(property)。 ngclass...

内置指令

内置属性型指令

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

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