有没有办法在 ng-multiselect-dropdown 关闭时添加功能？

Question

我正在使用 Angular 5 中的 ng-multiselect-dropdown 包来创建多选下拉列表。 我想在关闭或隐藏下拉组件时调用函数。

像这样

closeDropdown : function(){
   console.log("dropdown close triggered");
}

Answer 1

根据文档，您可以传递

closeDropDownOnSelection

值

true

以在选择完成时关闭下拉列表

ng-多选下拉菜单

如果有多项选择，您可以拨打

(onSelect)="onItemSelect($event)"

有关更多信息，请查看此 演示文档

Answer 2

您可以在

(change)

事件中调用该函数。

例如：

<ng-multiselect-dropdown
  (blur)="closeDropdown($event)"
>
</ng-multiselect-dropdown>

Answer 3

解决satira发现的bug（由于声誉低，我无法发表评论），即。 “当具有此多下拉列表的组件首次打开或重新加载页面并单击下拉列表之外的任何位置时， onDropDownClose() 会被调用。”对我来说，第一次之后就没有发生过。无论如何，我通过获取屏幕上任何元素（页眉、页脚或任何 div）的 id 并在 ngAfterViewInit 上使用 docuement.getElementById('element_id').click() 来解决它。

ngAfterViewInit() { document.getElementById('header').click(); }

这确保了我的应用程序不会发生副作用。我知道这是一个混乱的解决方案，但由于 ng-multidropdown 的 closeDropdown() 不起作用，这是我唯一的出路。

Answer 4

我最近遇到了这个问题，并使用 (ngModelChange) 和 (click) 的组合找到了一个适合我的解决方案。当使用 ng-multiselect-dropdown 时，其他普通 HTML 元素触发器（如 (blur) 和 (change)）不起作用，但 (ngModelChange) 确实起作用。唯一的问题是它在初始化时触发。但我向（单击）触发器添加了一个布尔变量，该变量似乎确实有效。

请注意，这也适用于 onSelect、onDeSelect 等

组件.ts：

...
dropDownSelect: boolean = false;
dropDownSelection: number;
...
saveFunction(event) {
  if(!this.dropDownSelect) return;
  ...
  this.dropDownSelect = false;
}

组件.html：

...
<ng-multiselect-dropdown [data]="dataSource" [(ngModel)]="dropDownSelection" [settings]="dropDownSettings" (click)="dropDownSelect = true" (ngModelChange)="saveFunction($event)"></ng-multiselect-dropdown>
...

Answer 5

我尝试了@misterz的解决方案，但没有成功。不过我修改了它，它运行得很好。 窍门： 除了(onDropDownClose)之外，监听一个点击事件；

 // this act as a differentiator between other calls(bug) and an intended call
 (click)="dropDownSelect = true".

在您的组件中，声明变量并按如下方式使用它：

dropDownSelect = false;

saveFunction($event) {
 if (this.dropDownSelect) {
        // close the opening to subsequent actions 
        this.dropDownSelect = false;
        // Perform action;
 };
}

Answer 6

在 GitHub.com 上的源代码中，您会发现一个

onDropDownClose

事件，您可以像这样使用它：

<ng-multiselect-dropdown
  name="city"
  [placeholder]="'Select City'"
  [data]="cities"
  formControlName="city"
  [disabled]="disabled"
  [settings]="dropdownSettings"
  (onSelect)="onItemSelect($event)"
  (onDropDownClose)="closeDropdown()"
>
</ng-multiselect-dropdown>

每次关闭下拉列表时（通过单击下拉列表或下拉列表外部），这都会触发

closeDropdown()

函数。

希望这有帮助！