angular 7事件绑定 angular7事件绑定|Angular7教程

本文概述

如何在事件绑定中使用数据？

Angular方便我们将事件与方法绑定在一起。此过程称为事件绑定。事件绑定与括号（）一起使用。
我们来看一个例子：

@Component({ selector: 'app-server2', templateUrl: './server2.component.html', styleUrls: ['./server2.component.css'] }) export class Server2Component implements OnInit { allowNewServer = false; serverCreationStatus= 'No Server is created.'; constructor() { setTimeout(() =>{ this.allowNewServer = true; }, 5000); }ngOnInit() { }}

component.html文件：

< p> Server2 is also working fine. < /p> < button class="btn btn-primary" [disabled]="!allowNewServer" >Add Server< /button> < !--< h3 [innerText]= "allowNewServer">< /h3>-->{{serverCreationStatus}}

文章图片
它将显示“未创建服务器”的输出。
现在，我们将使用按钮绑定事件。
【angular 7事件绑定】在component.ts文件中添加另一个方法onCreateServer（），它将调用该事件。
component.html文件：

< p> Server2 is also working fine. < /p> < button class="btn btn-primary" [disabled]="!allowNewServer" (click)="onCreateServer()">Add Server< /button> < !--< h3 [innerText]= "allowNewServer">< /h3>-->{{serverCreationStatus}}

输出：
现在，单击按钮后，你将看到它显示服务器已创建。这是事件绑定的示例。

文章图片
如何在事件绑定中使用数据？让我们通过一个例子来理解它。在这里，我们将创建一个名为“ onUpdateServerName”的方法，并为其添加一个事件。
component.html文件：

< label>Server Name< /label> < input type="text" class="form-control" (input)="OnUpdateServerName($event)"> < p>{{serverName}}< /p>

component.ts文件：

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-server2', templateUrl: './server2.component.html', styleUrls: ['./server2.component.css'] }) export class Server2Component implements OnInit { allowNewServer = false; serverName = ''; constructor() { setTimeout(() =>{ this.allowNewServer = true; }, 5000); }ngOnInit() { } OnUpdateServerName(event: Event) { this.serverName = (< HTMLInputElement>event.target).value; } }

输出：