Angular 2 中 onClick 事件的概念

Angular 6天前 13

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 { }