angular4-表单

导入表单模块

import { FormsModule } from '@angular/forms';
// ...
@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, UserComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

模板变量语法
 
<video #player></video>
<button (click)="player.pause()">Pause</button>
 
<video #player></video> ==
<video ref-player></video>示例；

@Component({
    selector: 'sl-user',
    template: `
    ...
    <div>
        <form (submit)="addSkill(skill.value)">
            <label>添加技能</label>
            <input type="text" #skill>
        </form>
    </div>
    `
})
export class UserComponent {
   // ...
　　skills: string[];

　　constructor() {
        this.skills = ['AngularJS 1.x', 'Angular 2.x', 'Angular 4.x'];
    }

    addSkill(skill: string) {
        let skillStr = skill.trim();
        if (this.skills.indexOf(skillStr) === -) {
            this.skills.push(skillStr);
        }
    }
}