处理事件（Handling Events）

优质

小牛编辑

135浏览

2023-12-01

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

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

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

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

我们定义了一个名为Boolean的类型的变量，该变量最初为true。
接下来，我们定义了单击的函数，只要在我们的html页面上单击按钮，就会调用该函数。在函数中，我们将Status属性的值从true更改为false。

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

<div> 
   {{Status}} 
   <button (click) = "clicked()">Click</button> 
</div>

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

我们首先只显示我们类的Status属性的值。
然后定义具有Click值的按钮html标记。然后，我们确保按钮的click事件被触发到我们class中的clicked事件。

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

Step 4 - 单击“单击”按钮，您将获得以下输出。