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 的 Boolean 类型变量，该变量最初为 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”按钮，您将得到以下输出。

单击“假”