Angular 5 ng-select 2.0.0：点击组件外部如何关闭下拉框？

针对你的问题，ng-select 2.0.0版本并没有内置点击组件外部自动关闭下拉框的功能，我们可以通过手动监听全局点击事件来实现这个需求，具体步骤如下：

步骤1：给ng-select添加模板引用变量 #

修改你的HTML代码，给ng-select加上#ngSelect的引用，这样我们就能在组件类中获取到它的实例：

<ng-select 
  #ngSelect
  placeholder="Seçiniz" 
  [items]="people" 
  bindLabel="name" 
  bindValue="id" 
  [virtualScroll]="true"
></ng-select>

（这里提个小细节：你的people是字符串数组，bindLabel="name"会试图读取每个元素的name属性，这会导致报错。你可以直接去掉bindLabel（默认会显示数组元素本身），或者把people改成对象数组，这个后面会补充说明）

步骤2：在组件类中实现监听逻辑 #

在组件的TS代码中，我们需要完成这几件事：获取ng-select实例、添加全局点击监听、判断点击区域是否在组件内部、组件销毁时移除监听避免内存泄漏。修改后的代码如下：

import { Component, ElementRef, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { NgSelectComponent } from '@ng-select/ng-select';

@Component({
  selector: 'app-your-component', // 替换成你实际的组件选择器
  templateUrl: './your-component.component.html' // 替换成你实际的组件模板路径
})
export class YourComponent implements OnInit, OnDestroy {
  people = ['Ali', 'Veli', 'Ayşe', 'Fatma'];
  @ViewChild('ngSelect') ngSelect!: NgSelectComponent;
  clickListener: any;

  constructor(private el: ElementRef) {}

  ngOnInit() {
    // 监听全局点击事件
    this.clickListener = document.addEventListener('click', (event) => {
      const clickedInside = this.el.nativeElement.contains(event.target);
      // 如果点击在组件外部，且下拉框处于打开状态，就关闭它
      if (!clickedInside && this.ngSelect.isOpen) {
        this.ngSelect.close();
      }
    });
  }

  ngOnDestroy() {
    // 组件销毁时一定要移除监听，防止内存泄漏
    document.removeEventListener('click', this.clickListener);
  }
}

补充优化建议 #

如果想要让bindLabel="name"和bindValue="id"正常工作，你需要把people改成对象数组：

people = [
  { id: 1, name: 'Ali' },
  { id: 2, name: 'Veli' },
  { id: 3, name: 'Ayşe' },
  { id: 4, name: 'Fatma' }
];

这样下拉框就能正确显示name字段，选中后返回对应的id值了。

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