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;
}
}
关于上述代码，需要注意以下几点。
-
我们正在定义一个名为状态的变量，其类型为布尔值，最初为真。
-
接下来，我们定义 clicked 函数，每当在我们的 html 页面上单击按钮时都会调用该函数。在函数中，我们将 Status 属性的值从 true 更改为 false。
步骤 2 ：对app/app.component.html文件进行如下修改，也就是模板文件。
<div>
{{Status}}
<button (click) = "clicked()">Click</button>
</div>
关于上述代码，需要注意以下几点。
-
我们首先只显示我们类的 Status 属性的值。
-
然后使用 Click 的值定义按钮 html 标记。然后我们确保按钮的单击事件被触发到我们类中的单击事件。
步骤 3 ： 保存所有代码更改并刷新浏览器，你将得到以下输出。
步骤 4 ： 点击点击按钮，会得到如下输出。
