Question

如果用户在Angular 6中单击ng-select多重选择中的自定义标签，我需要执行一个操作。我尝试了以下操作：

模板：

<ng-select [multiple]="true"] (...)>

  <ng-template ng-label-tmp let-item="item" let-clear="clear">
      <span class="ng-value-label" (click)="onLabelClick(item, $event)">{{item.name}}</span>
      <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
  </ng-template>

</ng-select>

组件功能：

onLabelClick(item, $event) {

  $event.stopPropagation();
  $event.preventDefault();

  // Do my stuff
  (...)
}

该函数已触发，但始终会打开ng-select下拉列表并在ng-select组合框中设置焦点。当用户单击其中一个标签时，我希望下拉列表保持关闭状态。并且焦点不应放在组合框中，因为在移动设备上，这会打开键盘。

有人有主意吗？

Answer 1

ng-select开发人员帮助了我：使用mousedown效果很好：

<ng-template ng-label-tmp let-item="item" >
  <span (mousedown)="$event.stopPropagation()">{{ item }}</span> 
</ng-template>

https://github.com/ng-select/ng-select/issues/1092

ng-select：不打开自定义模板标签上的下拉列表，请单击

1 个答案: