Angular2 切换/打开 ng2-select 下拉菜单

Posted 2023-02-22

【中文标题】Angular2 切换/打开 ng2-select 下拉菜单

【英文标题】：Angular2 toggle/open ng2-select dropdown

【发布时间】：2018-05-16 02:20:39

【问题描述】：

Angular 4.3+

我正在使用 ng2-select 下拉菜单。

我希望在某些事件上打开下拉菜单。我想触发将打开下拉菜单的事件。

下拉菜单：

<ng-select
        [items]="list"
        [(ngModel)]="modelName"
        placeholder="Select">
</ng-select>

当用户单击下拉列表时，它会获得焦点并显示列表。我希望这发生在不同按钮上的某些点击事件上。

到目前为止我所尝试的：

this.el 是 ElementRef 到 ng-select 元素。 （正确获取 ng-select 的元素引用，它会在控制台记录我试图触发事件的正确元素。）

当用户点击它时它会打开，我试图触发一个元素的点击事件。 this.el.nativeElement.click(); 试图在 .ui-select-toggle 元素上触发点击事件。 this.el.nativeElement.querySelector('.ui-select-toggle').dispatchEvent(new Event('click')); 同样，我尝试触发focus 事件但没有成功。

有没有其他方法可以触发 ng-select 元素上的某些事件，这些事件会关注 ng-select 并打开下拉菜单。

【参考方案1】：

我在 setTimeOut 函数中封装了 click 事件触发代码，如下所示，它现在工作正常。

setTimeout(() => 
     this.el
         .nativeElement
         .querySelector('.ui-select-toggle')
         .dispatchEvent(new Event('click'));
);

.ui-select-toggle 是该元素在单击时会切换下拉菜单，所以我想如果我在该元素上触发单击事件，它将切换/打开下拉菜单。

所以我尝试了以下（没有 setTimeOut 包装器）

this.el
         .nativeElement
         .querySelector('.ui-select-toggle')
         .dispatchEvent(new Event('click'));

它什么也没做。但是当我将该代码包装在 setTimeOut 中时，它实际上会触发点击事件，并且我得到了预期的功能。

这里我不确定它为什么会这样，但我相信这与 javascript 有关。

【参考方案2】：

如果您使用多种模式：

openNg2Select(ng2Select: SelectComponent) 
    setTimeout(() => 
        const ng2 = ng2Select.element.nativeElement.querySelector('.ui-select-search');
        ng2.dispatchEvent(new Event('click'));
    );

在 html 中：

<ng-select #ng2Select [multiple]="true" [items]="items" (selected)="selected($event)"
           (removed)="removed($event)" placeholder="Please Select" 
           [(ngModel)]="selectedItem">
</ng-select>
<button class="btn btn-pripary" (click)="openNg2Select(ng2Select)>Open ng2-select</button>