Angular 事件绑定
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;
}
}
输出:
您会看到，当您在块中键入任何内容时，它将在输入下方动态更新它。这就是我们可以使用$ event获取事件数据的方式。
