面试题：Angular自定义指令的生命周期钩子与事件处理

Question

在Angular自定义指令开发中，生命周期钩子函数有哪些重要作用？请以`ngOnInit`和`ngOnDestroy`为例，说明在指令的不同阶段，如何利用它们进行资源初始化和清理。另外，假设你有一个自定义指令，需要监听宿主元素的点击事件并做出响应，该如何实现？给出完整的代码逻辑。

Answer 1

生命周期钩子函数的重要作用

Angular 自定义指令中的生命周期钩子函数用于在指令的不同阶段执行特定的操作。它们使得开发者能够在指令创建、更新、销毁等各个阶段，插入自定义逻辑，从而实现复杂的功能。

ngOnInit和ngOnDestroy的作用及示例

1. ngOnInit：在指令初始化完成后调用，此时指令的输入属性已经被初始化。可以利用它进行资源的初始化，例如获取数据、初始化第三方库等。

import { Directive, OnInit } from '@angular/core';

@Directive({
  selector: '[appMyDirective]'
})
export class MyDirective implements OnInit {
  constructor() {}

  ngOnInit() {
    // 在这里进行资源初始化，例如：
    console.log('指令初始化完成，开始进行资源初始化');
  }
}

2. ngOnDestroy：在指令被销毁之前调用，用于清理资源，如取消订阅、释放 DOM 引用等，防止内存泄漏。

import { Directive, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

@Directive({
  selector: '[appMyDirective]'
})
export class MyDirective implements OnDestroy {
  private subscription: Subscription;

  constructor() {
    // 假设这里订阅了一个 observable
    this.subscription = new Subscription();
  }

  ngOnDestroy() {
    // 清理资源，取消订阅
    this.subscription.unsubscribe();
    console.log('指令即将销毁，清理资源');
  }
}

监听宿主元素点击事件的实现

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

@Directive({
  selector: '[appClickDirective]'
})
export class ClickDirective {
  constructor() {}

  @HostListener('click', ['$event'])
  onClick(event: Event) {
    console.log('宿主元素被点击了！', event);
    // 在这里添加点击事件响应逻辑
  }
}

在模板中使用该指令：

<div appClickDirective>点击我</div>