angular-docs-cn/aio/content/guide/event-binding.md
Zhicheng WANG d4b884fe17 Merge remote-tracking branch 'en/master' into aio
# Conflicts:
#	aio/content/cli/index.md
#	aio/content/guide/accessibility.md
#	aio/content/guide/ajs-quick-reference.md
#	aio/content/guide/angular-compiler-options.md
#	aio/content/guide/animations.md
#	aio/content/guide/aot-compiler.md
#	aio/content/guide/architecture-components.md
#	aio/content/guide/architecture-modules.md
#	aio/content/guide/architecture-next-steps.md
#	aio/content/guide/architecture-services.md
#	aio/content/guide/attribute-directives.md
#	aio/content/guide/bootstrapping.md
#	aio/content/guide/browser-support.md
#	aio/content/guide/cli-builder.md
#	aio/content/guide/comparing-observables.md
#	aio/content/guide/component-styles.md
#	aio/content/guide/creating-libraries.md
#	aio/content/guide/dependency-injection-in-action.md
#	aio/content/guide/dependency-injection-navtree.md
#	aio/content/guide/dependency-injection-providers.md
#	aio/content/guide/dependency-injection.md
#	aio/content/guide/deployment.md
#	aio/content/guide/deprecations.md
#	aio/content/guide/displaying-data.md
#	aio/content/guide/dynamic-component-loader.md
#	aio/content/guide/elements.md
#	aio/content/guide/file-structure.md
#	aio/content/guide/glossary.md
#	aio/content/guide/http.md
#	aio/content/guide/i18n.md
#	aio/content/guide/ivy-compatibility.md
#	aio/content/guide/language-service.md
#	aio/content/guide/lifecycle-hooks.md
#	aio/content/guide/module-types.md
#	aio/content/guide/ngmodule-faq.md
#	aio/content/guide/ngmodule-vs-jsmodule.md
#	aio/content/guide/ngmodules.md
#	aio/content/guide/observables-in-angular.md
#	aio/content/guide/pipes.md
#	aio/content/guide/providers.md
#	aio/content/guide/releases.md
#	aio/content/guide/route-animations.md
#	aio/content/guide/router-tutorial.md
#	aio/content/guide/router.md
#	aio/content/guide/rx-library.md
#	aio/content/guide/schematics-authoring.md
#	aio/content/guide/schematics-for-libraries.md
#	aio/content/guide/service-worker-config.md
#	aio/content/guide/service-worker-getting-started.md
#	aio/content/guide/structural-directives.md
#	aio/content/guide/styleguide.md
#	aio/content/guide/template-syntax.md
#	aio/content/guide/template-typecheck.md
#	aio/content/guide/testing.md
#	aio/content/guide/typescript-configuration.md
#	aio/content/guide/upgrade-setup.md
#	aio/content/guide/user-input.md
#	aio/content/guide/using-libraries.md
#	aio/content/guide/web-worker.md
#	aio/content/guide/workspace-config.md
#	aio/content/marketing/docs.md
#	aio/content/marketing/events.html
#	aio/content/navigation.json
#	aio/content/start/index.md
#	aio/content/start/start-data.md
#	aio/content/start/start-deployment.md
#	aio/content/tutorial/toh-pt2.md
#	aio/content/tutorial/toh-pt4.md
#	aio/package.json
#	aio/src/app/app.component.ts
#	aio/src/app/layout/footer/footer.component.html
#	aio/src/app/shared/custom-icon-registry.ts
#	aio/src/environments/environment.stable.ts
#	aio/tools/stackblitz-builder/builder.js
#	aio/tools/transforms/angular-content-package/index.js
#	aio/tools/transforms/templates/api/lib/memberHelpers.html
#	aio/yarn.lock
#	integration/ng_elements/e2e/app.e2e-spec.ts
#	integration/ng_elements/src/app.ts
#	packages/common/src/pipes/date_pipe.ts
#	packages/core/src/metadata/directives.ts
#	packages/core/src/metadata/ng_module.ts
#	packages/core/src/render/api.ts
#	packages/forms/src/directives/ng_model.ts
#	packages/forms/src/form_builder.ts
#	packages/forms/src/model.ts
#	packages/platform-browser/src/browser.ts
#	packages/router/src/config.ts
#	packages/router/src/directives/router_link.ts
#	packages/router/src/directives/router_link_active.ts
#	packages/router/src/events.ts
#	packages/router/src/router.ts
#	packages/router/src/router_module.ts
#	packages/router/src/router_state.ts
2020-12-04 20:22:11 +08:00

5.6 KiB
Raw Blame History

Event binding

事件绑定

Event binding allows you to listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.

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

See the for a working example containing the code snippets in this guide.

包含本指南中的代码段的工作示例,参见。

Binding to events

绑定到事件

To bind to an event you use the Angular event binding syntax. This syntax consists of a target event name within parentheses to the left of an equal sign, and a quoted template statement to the right. In the following example, the target event name is click and the template statement is onSave().

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

<button (click)="onSave()">Save</button>

The event binding listens for the button's click events and calls the component's onSave() method whenever a click occurs.

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

Syntax diagram

Custom events with EventEmitter

使用 EventEmitter 自定义事件

Directives typically raise custom events with an Angular EventEmitter as follows.

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

  1. The directive creates an EventEmitter and exposes it as a property.

    该指令创建一个 EventEmitter 并将其对外暴露为属性。

  2. The directive then calls EventEmitter.emit(data) to emit an event, passing in message data, which can be anything.

    然后,该指令调用 EventEmitter.emit(data) 发出事件,传入消息数据,该消息数据可以是任何东西。

  3. Parent directives listen for the event by binding to this property and accessing the data through the $event object.

    父指令通过绑定到该属性来监听事件,并通过传入的 $event 对象接收数据。

Consider an ItemDetailComponent that presents item information and responds to user actions. Although the ItemDetailComponent has a delete button, it doesn't contain the functionality to delete the hero. It can only raise an event reporting the user's delete request.

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

The component defines a deleteRequest property that returns an EventEmitter. When the user clicks Delete, the component invokes the delete() method, telling the EventEmitter to emit an Item object.

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

The hosting parent component binds to the deleteRequest event of the ItemDetailComponent as follows.

宿主父组件将绑定到 ItemDetailComponentdeleteRequest 事件,如下所示。

When the deleteRequest event fires, Angular calls the parent component's deleteItem() method with the item.

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

Determining an event target

确定事件目标target

To determine an event target, Angular checks if the name of the target event matches an event property of a known directive. In the following example, Angular checks to see if myClick is an event on the custom ClickDirective.

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

If the target event name, myClick fails to match an element event or an output property of ClickDirective, Angular reports an "unknown directive" error.

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


What's next

下一步是什么

For more information on how event binding works, see How event binding works.

关于事件绑定工作原理的更多信息,请参阅事件绑定工作原理