angular4筆記系列之內置指令小結

發布時間: 2019-06-18 18:27:30 來源: 互聯網 欄目: JavaScript 點擊:

這篇文章主要介紹了angular4筆記系列之內置指令小結,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

內置指令

內置屬性型指令

屬性型指令會監聽和修改其它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>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持我們。

本文標題: angular4筆記系列之內置指令小結
本文地址: http://www.leskzw.tw/wangluo/javascript/244053.html

如果認為本文對您有所幫助請贊助本站

支付寶掃一掃贊助微信掃一掃贊助

  • 支付寶掃一掃贊助
  • 微信掃一掃贊助
  • 支付寶先領紅包再贊助
    聲明:凡注明"本站原創"的所有文字圖片等資料,版權均屬編程客棧所有,歡迎轉載,但務請注明出處。
    vue項目動態設置頁面title及是否緩存頁面的問題vue.js層疊輪播效果的實例代碼
    Top 广东好彩1中奖规则