小说排行榜,辰东完美世界有声小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

創(chuàng)新互聯(lián)Angular教程：Angular事件綁定

事件綁定

通過(guò)事件綁定，你可以偵聽并響應(yīng)用戶操作，例如按鍵、鼠標(biāo)移動(dòng)、點(diǎn)擊和觸摸。

朝天ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

包含本指南中的代碼段的工作示例，參見現(xiàn)場(chǎng)演練 / 下載范例。

綁定到事件

要綁定到事件，請(qǐng)使用 Angular 的事件綁定語(yǔ)法。此語(yǔ)法由等號(hào)左側(cè)括號(hào)內(nèi)的目標(biāo)事件名和右側(cè)引號(hào)內(nèi)的模板語(yǔ)句組成。在下面的示例中，目標(biāo)事件名是 ?click ?，模板語(yǔ)句是 ?onSave()? 。

事件綁定偵聽按鈕的單擊事件，并在發(fā)生單擊時(shí)調(diào)用組件的 ?onSave()?。

綁定到被動(dòng)事件

Angular 還支持被動(dòng)事件偵聽器。例如，使用以下步驟使?jié)L動(dòng)事件變?yōu)楸粍?dòng)的。

在 ?src ?目錄下創(chuàng)建一個(gè)文件 ?zone-flags.ts? 。
將以下行添加到此文件中。

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

在 ?src/polyfills.ts? 文件中，在導(dǎo)入 zone.js 之前，先導(dǎo)入新創(chuàng)建的 ?zone-flags? 。

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

在這些步驟之后，如果你為 ?scroll ?事件添加事件偵聽器，偵聽器就會(huì)是 ?passive ?的。

使用 EventEmitter 自定義事件

指令通常使用 Angular 的 ?EventEmitter ?引發(fā)自定義事件，如下所示。

該指令創(chuàng)建一個(gè) ?EventEmitter ?并將其對(duì)外暴露為屬性。
然后，該指令調(diào)用 ?EventEmitter.emit(data)? 發(fā)出事件，傳入消息數(shù)據(jù)，該消息數(shù)據(jù)可以是任何東西。
父指令通過(guò)綁定到該屬性來(lái)監(jiān)聽事件，并通過(guò)傳入的 ?$event? 對(duì)象接收數(shù)據(jù)。

考慮一個(gè) ?ItemDetailComponent ?，它會(huì)顯示條目信息并響應(yīng)用戶操作。盡管 ?ItemDetailComponent ?顯示了一個(gè)刪除按鈕，但它并不包含刪除英雄的功能。它只會(huì)引發(fā)一個(gè)報(bào)告用戶要求刪除的事件。


{{ item.name }}

該組件定義了一個(gè) ?deleteRequest ?返回 ?EventEmitter ?的屬性。當(dāng)用戶單擊 Delete 時(shí)，該組件將調(diào)用 ?delete()? 方法，讓這個(gè) ?EventEmitter ?發(fā)出 ?Item ?對(duì)象。

// 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 ?事件，如下所示。

當(dāng) ?deleteRequest ?事件觸發(fā)時(shí)，Angular 就會(huì)以該條目為參數(shù)調(diào)用其父組件的 ?deleteItem()?。

確定事件目標(biāo)（target）

為了確定事件的目標(biāo)，Angular 會(huì)檢查目標(biāo)事件的名稱是否與已知指令的事件屬性匹配。在以下示例中，Angular 會(huì)檢查 ?myClick ?是否來(lái)自自定義指令 ?ClickDirective ?的事件。

myClick is an event on the custom ClickDirective:

{{clickMessage}}

如果目標(biāo)事件名稱 ?myClick ?未能匹配元素上的事件或 ?ClickDirective ?的輸出屬性，則 Angular 將報(bào)告“未知指令”錯(cuò)誤。

網(wǎng)頁(yè)名稱：創(chuàng)新互聯(lián)Angular教程：Angular事件綁定
轉(zhuǎn)載注明：http://m.fisionsoft.com.cn/article/codeods.html