如何在自定义ng-select组件中传递(click)="clear(item)"事件

解决方案 #

问题根源是自定义labelTemplate的上下文里没有传入ng-select提供的clear函数，导致模板里的clear为undefined。按以下步骤修改：

1. 更新组件HTML中的自定义标签模板传递逻辑：
   在ng-label-tmp模板中接收ng-select提供的clear函数，并通过ngTemplateOutlet把它传入外部自定义模板的上下文：

   <!-- Label Template -->
   <ng-template *ngIf="labelTemplate" ng-label-tmp let-item="item" let-clear="clear">
       <ng-container *ngTemplateOutlet="labelTemplate; context: { $implicit: item, clear: clear }"></ng-container>
   </ng-template>
   

2. 保留调用端的模板参数定义：
   你当前调用组件时的#labelTemplate已经正确声明了let-clear，这部分无需修改：

   <ng-template #labelTemplate let-item let-clear>
       <span class="ng-value-icon left" (click)="clear(item)" aria-hidden="true">×</span>
       <!-- 其他自定义内容 -->
   </ng-template>
   

修改完成后，自定义标签模板里的clear(item)就能正常触发ng-select的单个选项清除逻辑，和默认模板的行为保持一致。

内容的提问来源于stack exchange，提问作者nokiko