📌  相关文章
📜  角度2-用户输入

📅  最后修改于: 2020-10-28 05:11:59             🧑  作者: Mango

在Angular 2中，您可以使用HTML的DOM元素结构在运行时更改元素的值。让我们详细看一些。

输入标签

在app.component.ts文件中，放置以下代码。

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

@Component ({ 
   selector: 'my-app', 
   template: ' 
      
 
          
         {{name}} 
      
 
   ' 
}) 
export class AppComponent { }

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

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

  • （input）=“表达式” -这是一种将表达式绑定到输入元素的输入事件的声明方式。

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

  • $ event-是Angular在事件绑定中公开的表达式，具有事件有效负载的值。

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

现在，您可以键入任何内容，并且相同的输入将反映在Input控件旁边的文本中。

输入标签

点击输入

在app.component.ts文件中，放置以下代码。

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

@Component ({
   selector: 'my-app',
   template: ' {{clickMessage}}'
})

export class AppComponent {
   clickMessage = 'Hello';
   onClickMe() {
      this.clickMessage = 'This tutorial!';
   }
}

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

点击我

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

单击我按钮