Angular 2 中 onClick 事件的概念
Muhammad Adil
2023年1月30日
2022年4月20日
Angular 2 框架是用于构建应用程序前端的结构框架。
Angular 2 具有许多新功能，使其比其前身更加用户友好。
一个特性是能够在 Angular 2 中的 onClick 事件的帮助下调用函数。
Angular 2 onClick 事件
Angular 2 事件系统可用于处理不同类型的事件，例如鼠标点击、键盘按下和触摸手势。
onclick 事件在用户单击组件或元素时触发事件或函数。
<button (click)="define()">Define</button>
define() 语句执行组件的 define() 方法，(click) 绑定按钮单击事件。
在 Angular 2 中创建 onClick 事件的简单步骤
我们需要执行以下步骤。
-
为
Angular应用程序创建一个HTML模板。 -
在模板中添加一个
按钮。 -
在按钮的指令中定义
点击事件处理程序。 -
处理应用模块控制器中的点击事件，并在用户点击按钮时相应地更新
view-model数据。 -
实现视图模型数据的
更新以在用户单击按钮时刷新视图。 -
添加指令以在用户单击按钮时更新输入字段。
Angular 2 onClick 事件的示例
首先，让我们编写 Html 代码。
<button class="clickBtn" (click)="show=!show" >Click me</button>
<div class="Demo" *ngIf="show">
<h3>you can see how things are changing by pressing Clickme button</h3>
<br/>
<h3>This is how we use the concept of OnCLick Event in Angular 2</h3>
ngif 属性定义输入，它将视图与组件或组件与视图的值联系起来。
让我们转向 Typescript 代码。
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-click',
templateUrl: './fm.component.html',
styleUrls: ['./fm.component.css']
})
export class MyFmComponent implements OnInit {
registerForm: FormGroup;
submitted:false;
constructor() { }
ngOnInit() {
}
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app',
templateUrl: './my.component.html',
styleUrls: ['./my.component.css']
})
export class MyComponent implements OnInit {
show = false;
constructor() { }
ngOnInit() {
}
}
最后，让我们为 app.module.ts 编写 TypeScript 代码
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { MyFmComponent } from './clickme/fm.component';
import { MyComponent } from './Event/my.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent, MyComponent, MyFmComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
点击这里查看完整的工作代码。
Author: Muhammad Adil
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook