angular4筆記系列之內(nèi)置指令小結(jié)
內(nèi)置指令
內(nèi)置屬性型指令
屬性型指令會(huì)監(jiān)聽和修改其它HTML元素或組件的行為、元素屬性（Attribute）、DOM屬性（Property）。
NgClass
形式：[ngClass]="statement"
通過綁定到NgClass，可以同時(shí)添加或移除多個(gè)類。
setCurrentClasses() {
this.currentClasses = {
'saveable': this.canSave,
'modified': !this.isUnchanged,
'special': this.isSpecial
};
}
<div [ngClass]="currentClasses">This div</div>
NgStyle
形式：[ngStyle]="statement"
NgStyle綁定可以同時(shí)設(shè)置多個(gè)內(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 時(shí)需要 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實(shí)際上包括三個(gè)相互協(xié)作的指令：NgSwitch、NgSwitchCase 和 NgSwitchDefault
模板引用變量 ( #var )
模板引用變量通常用來引用模板中的某個(gè)DOM元素，它還可以引用Angular組件或指令或Web Component。
<input #phone placeholder="phone number"> <button (click)="callPhone(phone.value)">Call</button>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS service之select下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了AngularJS service之select下拉菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要給大家介紹了關(guān)于angular瀏覽器兼容性問題的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用angular具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
angularJs-$http實(shí)現(xiàn)百度搜索時(shí)的動(dòng)態(tài)下拉框示例
下面小編就為大家分享一篇angularJs-$http實(shí)現(xiàn)百度搜索時(shí)的動(dòng)態(tài)下拉框示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了angular1配合gulp和bower使用教程，本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-01-01
Angular.js之作用域scope''@'',''='',''&''實(shí)例詳解
這篇文章主要介紹了Angular.js之作用域scope'@','=','&'實(shí)例詳解,需要的朋友可以參考下2017-02-02
這篇文章主要給大家介紹了關(guān)于Angular變更檢測的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
本文介紹了其在AtScript、改善依賴入駐、Annotations、路由方案等方面的改變。雖然不知道打破原有是否是件好事，不過由于不向后兼容，我們需要為遷移做好計(jì)劃2016-02-02
上拉加載，是目前手機(jī)網(wǎng)站加載數(shù)據(jù)的一種常用方式，本文主要講解AnglarJs集成，上拉加載功能。感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-02-02
解決angular2 獲取到的數(shù)據(jù)無法實(shí)時(shí)更新的問題
今天小編就為大家分享一篇解決angular2 獲取到的數(shù)據(jù)無法實(shí)時(shí)更新的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
解決Angular4項(xiàng)目部署到服務(wù)器上刷新404的問題
今天小編就為大家分享一篇解決Angular4項(xiàng)目部署到服務(wù)器上刷新404的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08