在 angular 中，透過不同的方式檢測點選。 由於 click 是一個事件，因此在元件內部它是透過簡單的事件繫結來檢測的。 透過事件繫結在元件內進行檢測的簡單單擊如下所示：

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

```

為了繼續檢測元件外的點選，[@HostListener](https://www.geeksforgeeks.org/how-to-detect-click-event-outside-angular-component/) 裝飾器在 angular 中使用。 它是一個裝飾器，它宣告一個要偵聽的 DOM 事件，並提供一個帶有處理程式方法的連結，以便在該事件發生時執行。

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

使用 HostListener 的語法如下：

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

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

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

示例：在元件內繫結單擊

為了在元件內繫結單擊事件，將 hostListener 的 eventName 維護成值 “click”。 在這種情況下，上面的
程式碼將寫為：

```typescript
@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:

![](https://img-blog.csdnimg.cn/img_convert/3ea031b7978023278c9f10d07e01b3b8.png)

# Bind with click outside component

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

所以在下面給出的程式碼中，將新增另一個元件作為外部上下文，但是單擊它會導致當前元件上的單擊事件。

```typescript
@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 內捕獲元件外部的點選。
![](https://img-blog.csdnimg.cn/img_convert/e2af1ee17c664e9f7d0057b31b53b06e.gif)

Angular @HostListener 裝飾器的使用筆記

相關文章