在这篇博文中，我们将介绍如何添加按钮点击事件，以及在点击提交按钮时，如何通过一个例子从输入中获取数值。
绑定Angular按钮事件
通常，在任何angular应用程序中，用户点击按钮有两个原因，一个是提交表单，另一个是从一个页面导航到另一个页面。
当按钮被点击时，你需要处理一些逻辑来提交表单或导航到其他页面。
每一个html控件，如按钮，输入类型，都有一个事件，在用户事件中会被触发。当按钮被点击时，DOM事件onClick 事件被触发，你必须处理代码来处理这个DOM事件。
那么，在Angular应用程序中，按钮是如何被点击的呢？什么是Angular event binding ？在Angular应用程序中，显示按钮的代码被放置在HTML模板页面即视图中。
触发事件被放置在typecript组件类中。所以用户的事件信息会从视图传递到组件类。这就是所谓的Angular Event binding
这篇文章涵盖了以下例子的详细解释
- Angular按钮点击事件示例
- 在按钮点击事件中获取输入值
Angular按钮onclick函数示例
让我们在Angular组件中添加变化。
在Html模板组件--app.component.html。
- 组件模板HTML文件中，创建了一个HTML输入按钮
- 使用事件绑定语法，即括号()符号，为按钮添加
click事件 - 事件名称是放在括号内的函数名称。
- 当按钮被用户点击时，这个函数将被调用。
- 接下来，使用
angular two-way binding来显示状态，它将数据从/到视图传递给组件。 - 使用
ngModel或插值-{{}}语法显示数据。 - 使用显示的插值句法来显示数据。
<div style="text-align:center">
<h1>
Angular Button Click Event Example
</h1>
<button (click)="clickEvent()" >
Click Me</button>
<h2>{{msg}}</h2>
</div>
组件中的事件处理 在组件类中，你必须定义方法来处理点击事件。这个方法总是在用户点击按钮时被调用。在组件类中定义了字符串类型的msg变量，当点击按钮事件时，msg变量被更新为状态 "按钮被点击 "app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
msg:string;
constructor() {
}
clickEvent(){
this.msg='Button is Clicked';
return this.msg;
}
}
输出:
如何在按钮点击事件中获得输入文本值的例子
这个例子解释了关于在点击按钮时显示输入值。
在Html模板中:
- 为按钮添加了
click事件，并在其中提供了函数名称。 - 输入被定义为
ngModel属性，该属性将值从视图绑定到组件或组件绑定到视图。 - 使用
interpolation语法显示在文本框中输入的值。
<div style="text-align:center">
<h1>
Angular Button Click Event Example
</h1>
<button (click)="clickEvent()" >
Click Me</button>
<input type="text" [(ngModel)]="msg">
<h2>{{msg}}</h2>
</div>
Typecript组件类在点击事件中输入的值更新到一个新的变量中，并使用插值法显示在HTML中。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
msg:string;
msg1:string;
constructor() {
}
clickEvent(){
this.msg1=this.msg
}
}
总结
你学到了两件事，一个是Angular中带有点击事件的按钮，另一个是Angular应用程序中的按钮事件绑定是如何工作的。处理Angular按钮中的点击事件是非常容易的。
