Angular2 toggle/open ng2-select 下拉菜单

Question

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 并打开下拉菜单。

Answer 1

我像下面这样在 setTimeOut 函数中封装了点击事件触发代码，现在它工作正常。

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

.ui-select-toggle 是元素在点击时进行下拉切换，所以我想如果我在该元素上触发点击事件，它将 toggle/open 下拉。

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

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

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

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

Answer 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>

Angular2 toggle/open ng2-select 下拉菜单

Angular2 toggle/open ng2-select dropdown

javascript

jquery

drop-down-menu

angular2-directives

angular