Angular 2 用户输入

在Angular 2中，用户输入是一个重要的概念，因为当用户与应用程序交互时，我们需要根据用户的输入去更新应用程序中的数据和状态。本文将介绍Angular 2中用户输入的相关内容。

用户输入的类型

Angular 2中支持各种类型的用户输入，包括：

• 鼠标事件（例如click、mousedown、mouseup等）
• 键盘事件（例如keydown、keypress、keyup等）
• 表单事件（例如submit、change、input等）

监听用户输入

为了监听用户输入，可以使用Angular 2的模板语法。例如：

<button (click)="handleClick()">Click me</button>

<input (input)="handleChange($event.target.value)">

这里的(click)和(input)被称为事件绑定。当用户点击按钮或者在输入框中输入时，handleClick和handleChange函数将会被触发。$event参数会传递一个事件对象，其中包含有关事件的详细信息，例如鼠标坐标、键盘码、输入框的值等。

双向绑定

在某些情况下，我们需要更新组件和模板中的数据，同时也需要响应用户的输入。双向绑定是一种通用的解决方案，可以满足这种需求。在Angular 2中，可以使用双向绑定来实现输入框的值与组件中的属性同步。

<input [(ngModel)]="name">

这里的[(ngModel)]表示双向绑定，name是组件中的属性名。当用户在输入框中输入时，组件中的name属性将被自动更新。反过来，如果组件中的name属性发生了变化，输入框的值也将自动更新。

需要注意的是，为了使用双向绑定，必须先导入FormsModule模块。

import { NgModule }      from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

防止用户输入

有时候，我们需要在用户输入之前做一些额外的验证或过滤工作。例如，如果用户只能输入数字，我们可以使用如下指令：

<input type="text" (input)="handleInput($event)" appNumbersOnly>

这里的appNumbersOnly是一个自定义指令，它通过监听输入事件，自动将输入框中非数字字符过滤掉。自定义指令的用法将在其他文章中详细介绍。

总结

Angular 2中的用户输入是一个非常重要的概念，通过事件绑定、双向绑定和自定义指令，我们可以轻松地实现与用户的交互。虽然本文只介绍了Angular 2中的一些基本用法，但这些用法已经足够涵盖大部分的用户输入场景。