angular4筆記系列之內(nèi)置指令小結(jié)
內(nèi)置指令
內(nèi)置屬性型指令
屬性型指令會監(jiān)聽和修改其它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綁定可以同時設置多個內(nèi)聯(lián)樣式。
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
內(nèi)置結(jié)構(gòu)型指令
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實際上包括三個相互協(xié)作的指令:NgSwitch、NgSwitchCase 和 NgSwitchDefault
模板引用變量 ( #var )
模板引用變量通常用來引用模板中的某個DOM元素,它還可以引用Angular組件或指令或Web Component。
<input #phone placeholder="phone number"> <button (click)="callPhone(phone.value)">Call</button>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
在Angular中使用NgTemplateOutlet創(chuàng)建可重用組件的流程步驟
在 Angular 中,使用 NgTemplateOutlet 而不是創(chuàng)建特定組件,可以使組件在不修改組件本身的情況下輕松修改為各種用例,在本文中,您將接受一個現(xiàn)有組件并重寫它以使用 NgTemplateOutlet,需要的朋友可以參考下2024-03-03Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output詳解 (上)
這篇文章主要給大家介紹了關于Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output的相關資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面跟著小編一起來看看吧。2017-07-07Angularjs Ng_repeat中實現(xiàn)復選框選中并顯示不同的樣式方法
今天小編就為大家分享一篇Angularjs Ng_repeat中實現(xiàn)復選框選中并顯示不同的樣式方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Angular實現(xiàn)一個簡單的多選復選框的彈出框指令實例
下面小編就為大家?guī)硪黄狝ngular實現(xiàn)一個簡單的多選復選框的彈出框指令實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04