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 的布尔类型变量，该变量最初为 true。

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

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

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

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

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

• 然后使用 Click 值定义按钮 html 标记。 然后我们确保按钮的单击事件被触发到我们类中的单击事件。

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

步骤 4 − 单击"Click"按钮，您将得到以下输出。