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

        }

    }

}