创新互联Angular教程：Angular事件绑定

事件绑定

通过事件绑定，你可以侦听并响应用户操作，例如按键、鼠标移动、点击和触摸。

朝天ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18982081108（备注：SSL证书合作）期待与您的合作！

包含本指南中的代码段的工作示例，参见现场演练 / 下载范例。

绑定到事件

要绑定到事件，请使用 Angular 的事件绑定语法。此语法由等号左侧括号内的目标事件名和右侧引号内的模板语句组成。在下面的示例中，目标事件名是 ​click ​，模板语句是 ​onSave()​ 。

Save

事件绑定侦听按钮的单击事件，并在发生单击时调用组件的 ​onSave()​。

绑定到被动事件

Angular 还支持被动事件侦听器。例如，使用以下步骤使滚动事件变为被动的。

1. 在 ​src ​目录下创建一个文件 ​zone-flags.ts​ 。
2. 将以下行添加到此文件中。

(window as any)['__zone_symbol__PASSIVE_EVENTS'] = ['scroll'];

3. 在 ​src/polyfills.ts​ 文件中，在导入 zone.js 之前，先导入新创建的 ​zone-flags​ 。

import './zone-flags';
import 'zone.js';  // Included with Angular CLI.

在这些步骤之后，如果你为 ​scroll ​事件添加事件侦听器，侦听器就会是 ​passive ​的。

使用 EventEmitter 自定义事件

指令通常使用 Angular 的 ​EventEmitter ​引发自定义事件，如下所示。

1. 该指令创建一个 ​EventEmitter ​并将其对外暴露为属性。
2. 然后，该指令调用 ​EventEmitter.emit(data)​ 发出事件，传入消息数据，该消息数据可以是任何东西。
3. 父指令通过绑定到该属性来监听事件，并通过传入的 ​$event​ 对象接收数据。

考虑一个 ​ItemDetailComponent ​，它会显示条目信息并响应用户操作。尽管 ​ItemDetailComponent ​显示了一个删除按钮，但它并不包含删除英雄的功能。它只会引发一个报告用户要求删除的事件。

{{ item.name }}

Delete

该组件定义了一个 ​deleteRequest ​返回 ​EventEmitter ​的属性。当用户单击 Delete 时，该组件将调用 ​delete()​ 方法，让这个 ​EventEmitter ​发出 ​Item ​对象。

// This component makes a request but it can't actually delete a hero.
@Output() deleteRequest = new EventEmitter();

delete() {
  this.deleteRequest.emit(this.item);
  this.displayNone = this.displayNone ? '' : 'none';
  this.lineThrough = this.lineThrough ? '' : 'line-through';
}

宿主父组件将绑定到 ​ItemDetailComponent ​的 ​deleteRequest ​事件，如下所示。

当 ​deleteRequest ​事件触发时，Angular 就会以该条目为参数调用其父组件的 ​deleteItem()​。

确定事件目标（target）

为了确定事件的目标，Angular 会检查目标事件的名称是否与已知指令的事件属性匹配。在以下示例中，Angular 会检查 ​myClick ​是否来自自定义指令 ​ClickDirective ​的事件。

myClick is an event on the custom ClickDirective:
click with myClick
{{clickMessage}}

如果目标事件名称 ​myClick ​未能匹配元素上的事件或 ​ClickDirective ​的输出属性，则 Angular 将报告“未知指令”错误。

当前标题：创新互联Angular教程：Angular事件绑定
本文网址：http://www.shufengxianlan.com/qtweb/news48/521398.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联