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”按钮,您将得到以下输出。

单击“假”