Angular - 用户输入

在 Angular 中，您可以利用 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 { }

关于以上代码，需要注意以下几点。

• [value] = ”username” - 用于将表达式 username 绑定到输入元素的 value 属性。

• (input) = ”expression” - 这是将表达式绑定到输入元素的 input 事件的声明方式。

• username = $event.target.value - 当 input 事件触发时执行的表达式。

• $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!';
   }
}

保存所有代码更改并刷新浏览器后，您将获得以下输出。

当您点击“点击我”按钮时，您将获得以下输出。