用户输入触发 DOM 事件。我们通过事件绑定来监听它们，把更新过的数据导入回我们的组件和 model 。
（1）绑定到用户输入事件
例子：建个app/click-me.component.ts文件
@Component({
selector: 'click-me',
template: `
<button (click)="onClickMe()">Click me!</button>
{{clickMessage}}`
})
export class ClickMeComponent {
clickMessage = '';
onClickMe() {
this.clickMessage = 'You are my hero!';
}
}
等号左边为绑定的目标，右边为模板语句
写绑定时，我们必须知道模板语句的 执行上下文 。 出现在模板语句中的各个标识符，全都属于一个特定的上下文对象。 这个对象通常都是控制此模板的 Angular 组件。
selector：为自定义标签，文件必须在app.module中导入；
导入的有import { 文件的根模块 } from 文件路径;
<pre>@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent,ClickMeComponent ],//每次新建最好都添加上
bootstrap: [ AppComponent,ClickMeComponent ]
})</pre>
还有在html中必须把标签涵盖进去;
（2）通过 $event 对象取得用户输入
我们可以绑定到所有类型的事件。让我们试试绑定到一个输入框的 keyup 事件，并且把用户输入的东西回显到屏幕上import { Component } from '@angular/core';
建个app/keyup.components.ts
//模板
template: `
<input (keyup)="onKey($event)">
<p>{{values}}</p>
// without strong typing弱类型onKey事件 `
export class KeyUpComponent_v1 {
values = '';
onKey(event:any) {
this.values += event.target.value + ' | ';
}
}
// with strong typing强类型onKey事件
export class KeyUpComponent_v1 {
values = '';
onKey(event: KeyboardEvent) {
this.values += (<HTMLInputElement>event.target).value + ' | ';
}
}
}
Angular 把事件对象存入 $event 变量中，也就是我们传到组件的 onKey() 方法中的那个。 我们希望取得的用户数据就在该变量中的某个地方。
$event 对象的形态取决于所触发的事件。 这个 keyup 事件来自 DOM ，所以 $event 必须是一个 标准的 DOM 事件对象 。 $event.target 给了我们一个 HTMLInputElement 对象，它有一个 value 属性，是用户所输入的数据。使用强类型后，我们就能看出直接把 DOM 事件对象传到方法里的做法有一个严重的问题：过多模板细节，太少关注点分离。 ( 译注： onKey 不应该理会模板的实现细节，只接收传入字符串。需要强制转换类型是代码的坏味道。 )
keyup1-anim.gif
# `这个图形在输入框没有内容的时候在浏览器没有任何变化。`
（3）从一个模板引用变量中获得用户输入
还有另一种方式，不用通过 $event变量来获得用户数据。
Angular 有一个叫做 模板引用变量 的语法特性。 这些变量给了我们直接访问元素的能力。 通过在标识符前加上井号 (#) ，我们就能定义一个模板引用变量.
在一个超简单的模板中实现了一个聪明的按键反馈循环。如：
建个app/loop-back.component.ts
@Component({
selector: 'loop-back',
template: `
<input #box (keyup)="0">
<p>{{box.value}}</p>
`
})
export class LoopbackComponent { }
keyup-loop-back-anim.gif
（4）按键事件过滤 （通过 key.enter）
过滤按键，比如每一个 $event.keyCode ，并且只有当这个按键是回车键的时候才更新 values 属性。
修改app/keyup.components.ts 文件
@Component({
selector: 'key-up3',
template: `
<input #box (keyup.enter)="values=box.value">
<p>{{values}}</p>
`
})
export class KeyUpComponent_v3 {
values = '';
}
keyup3-anim.gif
每次回车之后会触发input内的事件返回p标签的vlaue
（5）blur( 失去焦点 ) 事件
(blur)监听用户输入框失去焦点的事件。
修改app/keyup.components.ts 文件
@Component({
selector: 'key-up4',
template: `
<input #box
(keyup.enter)="values=box.value"
(blur)="values=box.value">
<p>{{values}}</p>
`
})
export class KeyUpComponent_v4 {
values = '';
}
失去焦点的时候会产生事件values的值被显示出来
我们已经掌握了响应用户输入和操作的基础技术。 虽然这些基础技术确实强大，但在处理大量用户输入时难免显得笨拙。 我们在事件底层操作，但是真正应该做的是：在数据输入字段和模型属性之间建立双向数据绑定。
##这节结束了 请点个赞吧——_——
网友评论