angular4筆記系列之內(nèi)置指令小結
更新時間：2018年11月09日 09:42:32 作者：zhouzhou
這篇文章主要介紹了angular4筆記系列之內(nèi)置指令小結,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
內(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)置結構型指令
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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
AngularJS service之select下拉菜單效果
這篇文章主要為大家詳細介紹了AngularJS service之select下拉菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要給大家介紹了關于angular瀏覽器兼容性問題的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用angular具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-07-07
angularJs-$http實現(xiàn)百度搜索時的動態(tài)下拉框示例
下面小編就為大家分享一篇angularJs-$http實現(xiàn)百度搜索時的動態(tài)下拉框示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了angular1配合gulp和bower使用教程，本文給大家介紹的非常詳細，具有參考借鑒價值,需要的朋友可以參考下2018-01-01
Angular.js之作用域scope''@'',''='',''&''實例詳解
這篇文章主要介紹了Angular.js之作用域scope'@','=','&'實例詳解,需要的朋友可以參考下2017-02-02
這篇文章主要給大家介紹了關于Angular變更檢測的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-03-03
本文介紹了其在AtScript、改善依賴入駐、Annotations、路由方案等方面的改變。雖然不知道打破原有是否是件好事，不過由于不向后兼容，我們需要為遷移做好計劃2016-02-02
上拉加載，是目前手機網(wǎng)站加載數(shù)據(jù)的一種常用方式，本文主要講解AnglarJs集成，上拉加載功能。感興趣的朋友跟隨腳本之家小編一起學習吧2018-02-02
解決angular2 獲取到的數(shù)據(jù)無法實時更新的問題
今天小編就為大家分享一篇解決angular2 獲取到的數(shù)據(jù)無法實時更新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
今天小編就為大家分享一篇解決Angular4項目部署到服務器上刷新404的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08