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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 女性寒性体质吃什么好 什么食物不适宜吃
下一篇: 挽回变心的老公的绝招,让他回到你身边
推荐阅读