开发手册 欢迎您!
软件开发者资料库

Angular 6 - 事件绑定

Angular 6事件绑定 - 从简单和简单的步骤学习Angular 6,从基本到高级概念,包括概述,环境设置,项目设置,组件,模块,数据绑定,事件绑定,模板,指令,管道,路由,服务, Http服务,表单,动画,材料,CLI,示例。

在本章中,我们将讨论事件绑定在Angular 6中的工作原理.当用户以键盘移动,鼠标单击或鼠标悬停的形式与应用程序交互时,它会生成一个事件.需要处理这些事件以执行某种操作.这就是事件绑定的结果.

让我们考虑一个更好理解的例子.

app.component.html

   

      Welcome to {{title}}.   

 Months :   

         Condition is valid.      Condition is valid   Condition is invalid
   Click Me

app.component.html 文件中,我们定义了一个按钮,并使用click事件向其添加了一个函数.

以下是定义按钮并向其添加功能的语法.

(click)="myClickFunction($event)"

该函数在 .ts 文件中定义: app.component. ts

import { Component } from '@angular/core';@Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css']})export class AppComponent {   title = 'Angular 6 Project!';   //array of months.   months = ["January", "Feburary", "March", "April",            "May", "June", "July", "August", "September",            "October", "November", "December"];   isavailable = true;   myClickFunction(event) {       //just added console.log which will display the event details in browser on click of the button.      alert("Button is clicked");      console.log(event);   }}

单击按钮后,控件将进入函数 myClickFunction 和a将出现一个对话框,其中显示单击按钮,如以下屏幕截图所示 :

输出使用myClickFunction

现在让我们将更改事件添加到下拉列表中.

以下代码行将帮助您添加更改事件到下拉列表&减去;

   

      Welcome to {{title}}.   

 Months :         {{i}}   

         Condition is valid.      Condition is valid   Condition is invalid
Click Me

该函数在 app.component.ts 文件中声明 :

import { Component } from '@angular/core';@Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css']})export class AppComponent {   title = 'Angular 6 Project!';   //array of months.   months = ["January", "Feburary", "March", "April",            "May", "June", "July", "August", "September",            "October", "November", "December"];   isavailable = true;   myClickFunction(event) {      alert("Button is clicked");      console.log(event);   }   changemonths(event) {      console.log("Changed month from the Dropdown");      console.log(event);   }}

控制台显示控制台消息"从下拉列表中更改月份"以及该事件.

从下拉列表更改月份

让我们添加当下拉列表中的值发生变化时, app.component.ts 中的警告消息如下所示:

import { Component } from '@angular/core';@Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css']})export class AppComponent {   title = 'Angular 6 Project!';   //array of months.   months = ["January", "February", "March", "April",            "May", "June", "July", "August", "September",            "October", "November", "December"];      isavailable = true;   myClickFunction(event) {       //just added console.log which will display the event details in browser       on click of the button.      alert("Button is clicked");      console.log(event);   }   changemonths(event) {      alert("Changed month from the Dropdown");   }}

当更改下拉列表中的值时,将出现一个对话框,并显示以下消息 - " 从下拉列表中更改了月份".

从Dropdown2更改月份