Angular 2 - 事件处理

在 Angular 2 中，可以很容易地处理按钮点击或其他类型的事件。事件从 HTML 页面触发，并发送到 Angular JS 类进行进一步处理。

让我们来看一个如何实现事件处理的例子。在这个例子中，我们将展示一个点击按钮和一个状态属性。最初，状态属性为 true。当点击按钮时，状态属性将变为 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 的布尔型变量，其初始值为 true。

• 接下来，我们定义了 clicked 函数，该函数将在我们的 HTML 页面上的按钮被点击时调用。在这个函数中，我们将 Status 属性的值从 true 更改为 false。

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

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

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

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

• 然后定义按钮 HTML 标签，其值为“点击”。然后，我们确保按钮的 click 事件被触发到我们类中的 clicked 事件。

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

步骤 4 - 点击“点击”按钮，您将看到以下输出。