Angular2.0 基础: User Input

1.Angular 2.0 中的变量

对输入值的获取，我们可以通过$event 来获取，也可以通过变量来获取。

template: `
  <input (keyup)="onKey($event)">
  <p>{{values}}</p>`

即，当user 按下并释放 一个按钮是，就会触发keyup 事件，Angular在$event 变量提供一个相应的DOM事件对象，

export class KeyUpComponent_v1 {
  values = '';

  onKey(event:any) { // without type info
    this.values += event.target.value + ' | ';
  }
}

$event 对象的属性取决于DOM 事件的类型。而所有的标准DOM事件对象都有一个target 属性，
上例将$event转换为any类型。 这样简化了代码，但是有成本。 没有任何类型信息能够揭示事件对象的属性，防止简单的错误

传入 $event 是靠不住的做法

Passing $event is a dubious practice

类型化事件对象揭露了重要的一点，即反对把整个 DOM 事件传到方法中，因为这样组件会知道太多模板的信息。

只有当它知道更多它本不应了解的 HTML 实现细节时，它才能提取信息。 这就违反了模板（用户看到的）和组件（应用如何处理用户数据）之间的分离关注原则

@Component({
  selector: 'loop-back',
  template: `
    <input #box (keyup)="0">
    <p>{{box.value}}</p>
  `
})
export class LoopbackComponent { }

如上图的box 就是一个变量