Angular 2 - 处理事件

在Angular 2中，也可以非常轻松地处理诸如按钮点击或任何其他类型事件之类的事件.事件从html页面触发并发送到Angular JS类进行进一步处理.

让我们看一个如何实现事件处理的示例.在我们的示例中，我们将查看显示单击按钮和状态属性.最初，status属性为true.单击该按钮后，status属性将变为false.

步骤1 : 将app.component.ts文件的代码更改为以下内容.

import {    Component } from '@angular/core';  @Component ({    selector: 'my-app',    templateUrl: 'app/app.component.html' }) export class AppComponent {    Status: boolean = true;    clicked(event) {       this.Status = false;    } }

以上代码需要注意以下几点.

• 我们正在定义一个名为Status的类型的变量，该变量最初为真.

• 下一步，我们定义了单击的函数，只要在我们的html页面上单击按钮就会调用该函数.在函数中，我们将Status属性的值从true更改为false.

步骤2 &minus ;对app/app.component.html文件进行以下更改，该文件是模板文件.

    {{Status}}    Click 

以上代码需要注意以下几点.

• 我们首先只显示我们类的Status属性的值.

• 然后定义按钮html标签，其值为Click .然后，我们确保按钮的click事件被触发到我们班级中点击的事件.

第3步 : 保存所有代码更改并刷新浏览器，您将获得以下输出.

第4步 : 单击Click按钮，您将得到以下输出.