Angular 2 用户输入 - 模板变量

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

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

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

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

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 + ' | ';
  }
}

链接: https://www.fly63.com/course/15_842