angular4笔记系列之内置指令小结

setCurrentClasses() {
 this.currentClasses = {
  'saveable': this.canSave,
  'modified': !this.isUnchanged,
  'special': this.isSpecial
 };
}

<div [ngClass]="currentClasses">This div</div>

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>

<input [(ngModel)]="currentHero.name">

<app-hero-detail ngIf="isActive"></app-hero-detail>

<div ngFor="let hero of heroes">{{hero.name}}</div>

<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>

<input #phone placeholder="phone number">

<button (click)="callPhone(phone.value)">Call</button>