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

让我们看一下如何实现事件处理的示例。在我们的示例中，我们将显示一个单击按钮和一个status属性。最初，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的变量，其类型为Boolean，最初为true。

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

步骤2-对app / app.component.html文件（即模板文件）进行以下更改。

 
   {{Status}} 
   Click 
 

关于上述代码，需要注意以下几点。

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

• 然后使用Click的值定义按钮html标记。然后，我们确保将按钮的click事件触发到类中的clicked事件。

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

步骤4-单击单击按钮，您将获得以下输出。