在这篇博文中，你将学习如何添加一个按钮的点击事件，以及在点击提交按钮时，如何通过一个例子从输入中获取数值。
Angular Button ClickEvent绑定
在任何Web应用程序中，用户点击按钮有两个原因：提交表单或从一个页面导航到另一个。
当按钮被点击时，你应该处理一些表单提交或导航到另一个页面的逻辑。
每一个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或插值-{{}}的语法显示数据。 - 使用显示的插值句法来显示数据
Angular Button Click Event Example
Click Me
{{msg}}
组件中的事件处理
在组件类中。
- 你必须定义处理点击事件的方法。当用户点击一个按钮时，这个方法总是被调用。
- 定义了字符串类型的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>
Typescript组件类
在点击事件中更新数值到一个新的变量中，并使用插值语法显示在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按钮中处理点击事件是很容易的。
