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>