ng-select 的自动关闭下拉菜单问题

Question

我正在尝试创建一个下拉菜单，当用户单击它外部时它会自动关闭。 在这个菜单中我添加了一个ng-select组件，但是当我点击其中一个选项时，菜单会关闭，因为ng-select的下拉面板在关闭时不在DOM内部，有什么办法可以实现我想要的？ 当用户选择 ng-option 时不关闭的下拉菜单？ 这里有一个问题的例子： https : //stackblitz.com/edit/angular-8m1ta5?file=src%2Fapp%2Fapp.component.ts

这是我用来跟踪用户点击的代码：

  @ViewChild('father', {static: false}) father;
  @HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {
    const clickedInside = this.father.nativeElement.contains(targetElement);
    if (!clickedInside) {
      this.dropdown = false;
    }
  }

#father标识下拉菜单的容器。

- -更新 - -

我找到了一个解决方案，但也许这不是很干净： https : //stackblitz.com/edit/angular-gymhed我刚刚添加了一个新变量，该变量在 ng-select 关闭后以 500 毫秒的超时时间更改，这样选择 ng-option 后 500ms 内，无法关闭下拉列表。

Answer 1

属性[closeOnSelect]="false"应该可以完成这项工作。 您必须将其添加到<ng-select>标签中

因此，从 stackblitz 代码将变为：

<ng-select placeholder="Status" [closeOnSelect]="false">
        <ng-option [value]="'0'">Option 1</ng-option>
        <ng-option [value]="'1'">Option 2</ng-option>
        <ng-option [value]="'2'">Option 3</ng-option>
</ng-select>

在这里你可以找到文档https://github.com/ng-select/ng-select

Answer 2

将ng-select的isOpen属性绑定到您的组件dropdown标志应该可以解决问题：

<ng-select placeholder="Status" [isOpen]="dropdown">
    <ng-option [value]="'0'">Option 1</ng-option>
    <ng-option [value]="'1'">Option 2</ng-option>
    <ng-option [value]="'2'">Option 3</ng-option>
</ng-select>

组件.ts

export class AppComponent  {
  dropdown = false;

  @ViewChild('father', {static: false}) father;
  @HostListener('document:click', ['$event'])
  public onClick(e) {
    const clickedInside = this.father.nativeElement.contains(e.target);
    if (!clickedInside) {
      this.dropdown = false;
    }else{
      this.dropdown=true;
    }
  }
}

看看https://github.com/ng-select/ng-select#inputs

我已经改变了你的堆栈闪电战