Angular 4中如何利用ElementRef实现点击外部关闭下拉菜单

我来帮你把这段代码的逻辑讲清楚，再针对你的下拉菜单场景做适配优化：

一、现有代码的工作原理 #

你写的这段Angular组件代码，核心是利用全局点击事件监听来判断点击是否发生在组件外部：

1. @Component里的host: { '(document:click)': 'onOutsideClick($event)' }：把整个文档的click事件绑定到组件的onOutsideClick方法，也就是说页面上任何地方点击都会触发这个方法。
2. ElementRef是Angular提供的用来获取组件DOM根元素的服务，this._eref.nativeElement就是你的组件对应的最外层DOM节点。
3. event.target是你点击的具体DOM元素，contains()方法用来判断这个元素是否在组件根元素内部：
   • 如果不在（点击了组件外部），就把companyResults设为null，这样下拉菜单因为*ngIf="companyResults"的判断，就会自动隐藏。
   • 如果在（点击了输入框或下拉菜单内部），就什么也不做，下拉保持显示。

二、适配你的下拉菜单需要注意的点 #

1. 修复HTML语法错误 #

你的模板里有个小问题：{{ companyResult.name }少了闭合的双大括号，会导致渲染失败，修正后是：

<li class="search-dropdown-li"> {{ companyResult.name }} </li>

2. 避免点击下拉选项时误关菜单 #

如果点击下拉里的<a>或<li>时，菜单意外关闭了，大概率是事件冒泡导致的——点击选项的事件会冒泡到document，触发onOutsideClick。解决方法是在addCompany方法里阻止事件冒泡：

• 先修改组件方法：

addCompany(companyResult, i, event: Event) {
  event.stopPropagation(); // 阻止事件往上冒泡到document
  // 你的其他业务逻辑，比如赋值给candidate.positions[i].company_name
  this.candidate.positions[i].company_name = companyResult.name;
  this.companyResults = null; // 选择后手动关闭菜单
}

• 再修改模板里的点击事件，传递$event：

<a class="search-dropdown-div" *ngFor="let companyResult of companyResults" (click)="addCompany(companyResult, i, $event)">

3. 优化事件监听写法（可选） #

用@HostListener装饰器替代host对象，代码会更清晰易读，Angular官方也更推荐这种写法：

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

@Component({
  // 你的组件元数据，去掉原来的host配置
})
class SomeComponent {
  constructor(private _eref: ElementRef) { }

  @HostListener('document:click', ['$event'])
  onOutsideClick(event: Event) {
    if (!this._eref.nativeElement.contains(event.target)) {
      this.companyResults = null;
    }
  }

  // 其他方法...
}

4. 确保下拉菜单在组件根元素内 #

要保证你的<ul>下拉菜单是组件模板的一部分，这样this._eref.nativeElement.contains()才能正确识别点击是否在内部。如果下拉是通过其他方式挂载到组件外部的（比如弹窗），这个判断就会失效，需要调整判断逻辑（比如直接获取下拉元素的DOM节点来判断）。

三、测试验证 #

做完以上调整后，你可以测试几个场景：

• 点击输入框：下拉正常显示（如果companyResults有值）
• 点击下拉选项：选项被选中，菜单关闭，且不会触发外部点击逻辑
• 点击页面其他地方：下拉菜单自动隐藏

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