Angular 监听HostListener销毁

在 Angular 中，可以使用 `ngOnDestroy` 钩子函数来销毁 `HostListener`。在组件被销毁时，`ngOnDestroy` 函数会被调用，从而可以在该函数中取消 `HostListener`。

例如，假设我们在组件中添加了一个 `HostListener`：

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: '<p>My Component</p>'
})
export class MyComponent {
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    console.log('Window resized!', event);
  }
}

要在组件销毁时取消此 `HostListener`，可以在组件的 `ngOnDestroy` 函数中使用 `removeEventListener` 方法取消监听器：

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: '<p>My Component</p>'
})
export class MyComponent {
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    console.log('Window resized!', event);
  }

  ngOnDestroy() {
    window.removeEventListener('resize', this.onResize);
  }
}

在 `ngOnDestroy` 函数中，我们使用 `window.removeEventListener` 方法取消 `resize` 事件的监听器。注意，我们需要传递 `this.onResize` 作为回调函数，以确保取消正确的 `HostListener`。