ngAfterViewInit中无法清空数组问题求助

1. 拼写错误：代码中this.exmapleArray存在拼写错误，正确变量名应为this.exampleArray，错误的拼写会导致无法正确引用目标数组。
2. ngAfterViewInit执行逻辑局限：该生命周期钩子仅在组件视图初始化完成后执行一次，只会在初始化瞬间检查一次输入框焦点状态，后续无法响应焦点变化，无法实现“失焦时清空数组”的持续监听需求。

1. 先修正拼写错误 #

将代码里的exmapleArray统一改为exampleArray，确保变量引用正确。

2. 替换监听方式（解决单次执行的局限） #

既然你提到blur事件不符合需求，推测你需要处理点击输入框外部的场景，可以通过监听document点击事件来实现：

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

@Component({
  // 你的组件元数据
})
export class YourComponent {
  exampleArray: any[] = [];
  @ViewChild('suggestionInput') suggestionInput!: ElementRef;

  @HostListener('document:click', ['$event'])
  onDocumentClick(event: MouseEvent) {
    const inputElement = this.suggestionInput.nativeElement;
    // 判断点击区域是否在输入框外部
    if (inputElement && !inputElement.contains(event.target)) {
      setTimeout(() => {
        this.exampleArray = [];
      }, 50);
    }
  }
}

同时在模板中给输入框添加模板引用变量：

<input #suggestionInput class="suggestionInput" type="text" />

若坚持在ngAfterViewInit中处理（不推荐） #

可以在此钩子内添加焦点变化监听，但需注意组件销毁时移除监听避免内存泄漏：

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

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnDestroy {
  exampleArray: any[] = [];
  private blurListener?: () => void;

  ngAfterViewInit(): void {
    const inputElement = document.querySelector('.suggestionInput');
    if (inputElement) {
      this.blurListener = () => {
        setTimeout(() => {
          this.exampleArray = [];
        }, 50);
      };
      inputElement.addEventListener('blur', this.blurListener);
    }
  }

  ngOnDestroy(): void {
    const inputElement = document.querySelector('.suggestionInput');
    if (inputElement && this.blurListener) {
      inputElement.removeEventListener('blur', this.blurListener);
    }
  }
}

内容的提问来源于stack exchange，提问作者lucifer_096