Anauglar2中的模板语法

<img src="{{heroImageUrl}}">
<img [src]="‘‘ + heroImageUrl">

<div>The title is {{title}}</div>
<div [textContent]="‘The title is ‘+title"></div>

<td [attr.colspan]="1 + 1">One-Two</td>

<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>

<div class="bad curly special"   [class]="‘bad curly‘">Bad curly</div>

<div [class.special]="isSpecial">The class binding is special</div>

<div class="special"  [class.special]="!isSpecial">This one is not so special</div>

<button [style.color] = "isSpecial ? ‘red‘ : ‘green‘">Red</button>
<button [style.backgroundColor]="canSave ?‘cyan‘ : ‘grey‘" >Save</button>

<button [style.fontSize.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.fontSize.%]="!isSpecial ? 150 : 50" >Small</button>

<button (click)="onSave()">Save</button>

<button on-click="onSave()">On Save</button>

!-- `myClick` is an event on the custom `MyClickDirective` -->
<div myClick (myClick)="clickity=$event">click with myClick</div>


<input [value]="currentHero.firstName"  (input)="currentHero.firstName=$event.target.value" >

setClasses() {
  let classes =  {
    saveable: this.canSave,      // true
    modified: !this.isUnchanged, // false
    special: this.isSpecial,     // true
  }
  return classes;
}

<div [ngClass]="setClasses()">This div is saveable and special</div>

setStyles() {
  let styles = {
    // CSS property names
    ‘font-style‘:  this.canSave      ? ‘italic‘ : ‘normal‘,  // italic
    ‘font-weight‘: !this.isUnchanged ? ‘bold‘   : ‘normal‘,  // normal
    ‘font-size‘:   this.isSpecial    ? ‘x-large‘: ‘smaller‘, // larger
  }
  return styles;
}


<div [ngStyle]="setStyles()">
  This div is italic, normal weight, and x-large
</div>

<div *ngIf="currentHero">Hello, {{currentHero.firstName}}</div>

<div *ngFor="#hero of heroes">{{hero.fullName}}</div>

<!-- NgFor with index -->
<div *ngFor="#hero of heroes, #i=index">{{i + 1}} - {{hero.fullName}}</div>

<form (ngSubmit)="onSubmit(theForm)" #theForm="ngForm">
  <div class="form-group">
    <label for="name">Name</label>
    <input class="form-control" required ngControl="firstName"
      [(ngModel)]="currentHero.firstName">
  </div>
  <button type="submit" [disabled]="!theForm.form.valid">Submit</button>
</form>

@Input()  hero: Hero;
@Output() deleted = new EventEmitter<Hero>();