Angular7:事件绑定
在本章中,我们将讨论事件绑定在 Angular 7中是如何工作的。当用户以键盘移动、鼠标点击或鼠标悬停的形式与应用程序交互时,它会生成一个事件。需要处理这些事件来执行某种操作。这就是事件绑定出现的地方。
让我们考虑一个例子来更好地理解这一点。
app.component.html
<!--The content below is only a placeholder and can be replaced.--> <div style = "text-align:center"> <h1>Welcome to {{title}}.</h1> </div> <div> Months : <select> <option *ngFor = "let i of months">{{i}}</option> </select> </div> <br/> <div> <span *ngIf = "isavailable; then condition1 else condition2"> Condition is valid. </span> <ng-template #condition1>Condition is valid</ng-template> <ng-template #condition2>Condition is invalid</ng-template> </div> <button (click) = "myClickFunction($event)"> Click Me </button>
在app.component.html文件中,我们定义了一个按钮,并使用click事件添加了一个函数。
下面是定义按钮并向其添加函数的语法。
(click) = "myClickFunction($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 7'; // declared array of months. months = ["January", "February", "March", "April", "May","June", "July", "August", "September", "October", "November", "December"]; isavailable = true; //variable is set to 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功能,并出现一个对话框,显示点击按钮,如下图所示
按钮的样式添加在add.component.css中
button { background-color: #2B3BCF; border: none; color: white; padding: 10px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; }
现在让我们将onchange事件添加到下拉列表中。
下面一行代码将帮助您将更改事件添加到下拉列表中
app.component.html
<!--The content below is only a placeholder and can be replaced.--> <div style = "text-align:center"> <h1>Welcome to {{title}}.</h1> </div> <div> Months : <select (change) = "changemonths($event)"> <option *ngFor = "let i of months">{{i}}</option> </select> </div> <br/> <div> <span *ngIf = "isavailable; then condition1 else condition2"> Condition is valid. </span> <ng-template #condition1>Condition is valid</ng-template> <ng-template #condition2>Condition is invalid</ng-template> </div> <br/> <button (click) = "myClickFunction($event)"> Click Me </button>
该函数在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 7'; // declared array of months. months = ["January", "Feburary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; isavailable = true; //variable is set to 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) { console.log("Changed month from the Dropdown"); console.log(event); } }
从下拉列表中选择月份,您会看到控制台消息“Changed month from the Dropdown”与事件一起显示在控制台中。
当下拉列表中的值发生变化时,让我们在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 7'; // declared array of months. months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; isavailable = true; //variable is set to 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"); } }
当下拉列表中的值更改时,将出现一个对话框,并显示以下消息:
“Changed month from the Dropdown”.