在 angular 中，通過不同的方式檢測點擊。 由于 click 是一個事件，因此在組件內部它是通過簡單的事件綁定來檢測的。 通過事件綁定在組件內進行檢測的簡單單擊如下所示：

@Component({ selector: "geeks", template: ` <h1 (click)="clicked()">{{ some_text }}</h1> ` }) export class GeeksComponent { constructor() {} some_text = "Click Here"; clicked() {this.some_text = "Event Triggered"; } }

為了繼續檢測組件外的點擊，@HostListener 裝飾器在 angular 中使用。 它是一個裝飾器，它聲明一個要偵聽的 DOM 事件，并提供一個帶有處理程序方法的鏈接，以便在該事件發生時運行。

方法：這里的方法是使用@HostListener 裝飾器。 在 angular 中，它是一個裝飾器，有助于捕獲 DOM 內發生的任何類型的事件，并為開發人員提供基于該事件執行任何操作的靈活性。 在這里，在簡單的點擊事件上，處理程序將把點擊事件引用到組件上，對于整個 DOM 的點擊，它將使用 document:click 捕獲。

使用 HostListener 的語法如下：

@HostListener(events, args) handler_name(args){// Do something }

HostListener的語法有三點需要注意：

(1) eventName：顧名思義，它接收 DOM 中需要監聽的事件的名稱。
(2) args：這些是在事件發生時傳遞給處理程序方法的參數集。 它以列表格式輸入。
(3) handlen_name：這里是事件觸發時調用的方法定義。 它由 HostListener 自動調用。

示例：在組件內綁定單擊

為了在組件內綁定單擊事件，將 hostListener 的 eventName 維護成值 “click”。 在這種情況下，上面的
代碼將寫為：

@Component({ selector: "geeks", template: `<h1>{{ some_text }}</h1> ` }) export class GeeksComponent { constructor() {} some_text = "Click Here"; @HostListener("click") clicked() {this.some_text = "Event Triggered"; } }

點擊 Click here，屏幕將顯示：

Event Triggered:

Bind with click outside component

為了檢測組件外的點擊，需要查看另一個事件。 這里的 click 將不起作用，因為它檢測到組件內的點擊。 這里的關鍵是在DOM中尋找點擊，而不僅僅是組件，因此document:click將是正確的選擇，同時我們需要過濾掉組件內的事件， 這是由布爾變量 inside 完成的。

所以在下面給出的代碼中，將添加另一個組件作為外部上下文，但是單擊它會導致當前組件上的單擊事件。

@Component({ selector: "another", template: `<div style="border-style: solid;margin:5px;"><h1>Outside Component</h1><h2>Click here for outer component trigger</h2></div><geeks></geeks> ` }) export class AnotherComponent { constructor() {} } @Component({ selector: "geeks", template: `<div style="border-style:solid;margin:5px;"><h1>Inner Component</h1><h2>{{ some_text }}</h2></div> ` }) export class GeeksComponent { constructor() {} some_text = "Click Here"; inside = false; @HostListener("click") clicked() {this.inside = true; } @HostListener("document:click") clickedOut() {this.some_text = this.inside? "Event Triggered": "Event Triggered Outside Component";this.inside = false; } }

在這個例子中，如果點擊文本Outside Component，那么顯示的文本將是Event Triggered Outside Component。 這顯示了如何在 GeeksComponent 內捕獲組件外部的點擊。

總結

以上是生活随笔為你收集整理的Angular @HostListener 装饰器的使用笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。