Angular4-表单（用户输入）

使用Angular事件绑定语法把事件绑定到事件处理器

绑定到用户输入事件

使用Angular事件绑定机制来响应任何DOM事件

Click me!

$event对象

Angular在$event变量提供了一个相应的DOM事件对象，所有标准DOM事件对象都有一个target属性

{{values}}

export class KeyUpComponent{
  onKey(event:any){
    this.values += event.target.value + ' | ';
  }
}

把整个DOM事件传到方法中，违反了模版和组件之间的分离关注原则，所以又有另一种获取用户数据的方法：使用Angular的模版引用变量，这些变量提供了从模版中直接访问元素的能力，在标识符前加上（＃）就能声明一个模版引用变量

@Component({
  selector: 'app-key-up2',
  template: `
    
    
{{values}}
  `
})
export class KeyUpComponent_v2 {
  values = '';
  onKey(value: string) {
    this.values += value + ' | ';
  }
}

组件代码从视图中获得了干净的数据值，再也不用了解$event变量及其结构了

$event的类型

$event转换为any类型，这样简化了代码，但是有成本
下面是使用带类型方法

export class KeyUpComponent{
  values = ' ';
  onKey(event: KeyboardEvent){
    this.values += (event.target).value + ' | ';
   }
}

$event的类型现在是KeyboardEvent,不是所有的元素都有value属性，所以它将target转换为输入元素， OnKey方法更加清晰的表达了它期望从模版得到什么，以及它是如何解析事件的

按键事件过滤（通过key.enter）,失去焦点事件（blur）

@Component({
  selector: 'app-key-up4',
  template: `
    
[图片上传中...(qrcode_for_gh_25cdf4719bd8_258.jpg-cecf07-1510732035914-0)]

    
{{value}}
  `
})
export class KeyUpComponent_v4 {
  value = '';
  update(value: string) { this.value = value; }
}

公众号：前端咖秀