Angular 7 事件绑定

17 Mar 2025 | 阅读 2 分钟

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

它会输出“未创建服务器”。

现在，我们将把一个事件与按钮绑定。

在 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;
  }
}

输出