Angular 2 用户输入 - 绑定事件 - 学习 AngularJS 2

HTML 中，用户点击链接、按下按钮或者输入文字时，这些用户的交互行为都会触发 DOM 事件

本章我们开始学习如何使用 AngularJS 2 事件绑定语法来绑定这些事件

接下来的范例都是基于 AngularJS 2 TypeScript 环境配置上修改而来

绑定到用户输入事件

可以使用 AngularJS 事件绑定机制来响应任何 DOM 事件

下面的代码绑定了 <button> 的点击事件

<button (click)="onClickMe()">点我!</button>

等号左边的 (click) 表示把该按钮的点击事件作为绑定目标

等号右边，引号中的文本是一个模板语句

范例

app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <button (click)="onClickMe()">点我!</button>
    {{clickMessage}}`
})
export class AppComponent {
  clickMessage = '';

  onClickMe() {
    this.clickMessage = '简单教程!';
  }
}

运行以上范例，演示如下