Angular 2 用户输入
在 Angular 2 中，你可以利用 HTML 的 DOM 元素结构在运行时更改元素的值。让我们详细看一些。
输入标签
在 app.component.ts 文件中放置以下代码。
import {
Component
} from '@angular/core';
@Component ({
selector: 'my-app',
template: '
<div>
<input [value] = "name" (input) = "name = $event.target.value">
{{name}}
</div>
'
})
export class AppComponent { }
关于上面的代码，需要注意以下几点。
-
[值] = “用户名” ： 用于将表达式 username 绑定到输入元素的 value 属性。
-
(输入)=“表达式” ：这是一种将表达式绑定到输入元素的输入事件的声明方式。
-
用户名 = $event.target.value ： 触发输入事件时执行的表达式。
-
$event ： 是 Angular 在事件绑定中暴露的表达式，它具有事件的有效载荷的值。
保存所有代码更改并刷新浏览器后，你将获得以下输出。
你现在可以键入任何内容，相同的输入将反映在 输入 控件旁边的文本中。
点击输入
在 app.component.ts 文件中放置以下代码。
import {
Component
} from '@angular/core';
@Component ({
selector: 'my-app',
template: '<button (click) = "onClickMe()"> Click Me </button> {{clickMessage}}'
})
export class AppComponent {
clickMessage = 'Hello';
onClickMe() {
this.clickMessage = 'This tutorial!';
}
}
保存所有代码更改并刷新浏览器后，你将获得以下输出。
当你点击 Click Me 按钮时，你将获得以下输出。
