Angular User Input（用户输入）

用户输入

事件绑定

使用

• (event)
• on-event

概念

用户操作 -> DOM事件

• 用户操作
  • 点击链接
  • 按下按钮
  • 输入文字
• DOM事件
  • $event
    • 类型
      • any
        • 不能推测属性
        • 可能导致错误
      • 指定类型
        • 代码更加清晰，不宜产生歧义
        • 组件需要了解过多的模板细节
        • 违反了分离关注原则
    • 标准的HTML DOM事件
      • 有target属性

示例

模板

<button (click)="OnClickMe()">non $event</button>

<!-- 
	$event传参 
	keyup -> 键盘按下并松开 事件
-->
<input on-keyup="onKey($event)" />
{{inputKey}}
{{inputContent}}

组件

inputContent = '';
inputKey = '';

onClickMe(): void {
  console.log('你已经触发了点击事件');
}

// any类型
// 不能揭示事件对象的属性，可能导致错误的使用
// onKey(event: any): void{
//   this.inputContent += event.target.value + '|';
//   this.inputKey += event.key + '|';
// }

// 指定类型 -> 可以揭示事件对象的属性
//         -> 防止错误的引用
//         -> 代码更加清晰，不宜产生歧义
onKey(event: KeyboardEvent): void {
    // $event.target -> HTML元素
    // 转换元素类型 -> 不是每个元素都有value 
	// HTMLInputElement.value -> 当前输入框的内容
    this.inputContent += (event.target as HTMLInputElement).value + '|';
	// key -> 按下的键
    this.inputKey += event.key + '|';
}

模板变量

使用方式

• #name
• ref-name

实例

模板

<!--
	响应了异步事件（按键）-> 触发绑定更新机制 ->  视图刷新 
	极简写法 (keyup) = "0"
-->
<input #inputElement (keyup)="0"/>
<p>{{inputElement.value}}</p>

<!--
	优点：
		无需了解$event及其结构
		组件从模板获取的是干净的信息
-->
<input ref-input (keyup)="onKey(input.value)" />
<p>{{input.value}}</p>

组件

inputContent = '';

onKey(value: string): void {
    this.inputContent += value + '|';
}

事件筛选

事件处理器 event-handler

模板

<input (keyup)="onKey($event)" />
{{inputContent}}

组件

inputContent = '';

onKey(event: KeyboardEvent): void {
    if (event.key === 'Enter'){
        this.inputContent += (event.target as HTMLInputElement).value + '|';
    }
}

伪事件 pseudo-event

不存在DOM事件，属于angular的语法糖

模板

<input #input (keyup.enter)="onKey(input.value)" />
{{inputContent}}

组件

inputContent = '';

onKey(value: string): void {
    this.inputContent += value + '|';
}

失焦事件 blur-event

鼠标聚焦到其他位置时，引发的事件

模板

<input #input (keyup.enter)="onKey(input.value)" (blur)="onKey(input.value)" />
{{inputContent}}

组件

inputContent = '';

onKey(value: string): void {
    this.inputContent += value + '|';
}

总结

适用于小规模的输入，如果大型输入使用双向绑定-NgModel更简单优雅。