Angular 2 用户输入 - 模板变量 - 学习 AngularJS 2

HTML 中，用户点击链接、按下按钮或者输入文字时，这些用户的交互行为都会触发 DOM 事件

本章我们开始学习如何使用 AngularJS 2 事件绑定语法来绑定这些事件

接下来的范例都是基于 AngularJS 2 TypeScript 环境配置上修改而来

从一个模板引用变量中获得用户输入

可以通过使用局部模板变量来显示用户数据

模板引用变量通过在标识符前加上井号 (#) 来实现

下面的代码演示了如何使用局部模板变量

app/app.component.ts

import { Component } from '@angular/core';

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

上面的代码中

我们在 <input> 元素上定义了一个名叫 box 的模板引用变量

box变量引用的就是 <input> 元素本身，这意味着我们可以获得 input 元素的 value值，并通过插值表达式把它显示在 <p> 标签中

运行以上范例，演示如下

修改范例

我们可以使用模板引用变量来修改前面章节中的 keyup

app/app.components.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <input #box (keyup)="onKey(box.value)">
    <p>{{values}}</p>
  `
})
export class AppComponent{
  values = '';
  onKey(value: string) {
    this.values += value + ' | ';
  }
}

运行以上范例，演示如下