如何在没有“strictTemplates”的情况下使用自定义事件(而不是事件发射器)来抱怨“$event”不是自定义事件类型?

2023-11-23

我创建了一个 Angular 库,名为Angular-Slickgrid,它是 SlickGrid 的包装器,它是一个旧的 JavaScript/jQuery 库,我可以使用 SlickGrid 发送的任何自定义事件,没有任何问题,如下所示(此时一切都很好)

<angular-slickgrid gridId="grid28"
    [columnDefinitions]="columnDefinitions"
    [gridOptions]="gridOptions"
    [dataset]="dataset"                    
    (onSelectedRowsChanged)="handleOnSelectedRowsChanged($event.detail.eventData, $event.detail.args)">
</angular-slickgrid>

一切都很好并且一切正常

handleOnSelectedRowsChanged(event: any, args: OnSelectedRowsChangedEventArgs) {
    console.log(args);
}

在我的库中,我只是使用一个具有以下代码的小函数来调度这些事件

/** Dispatch of Custom Event, which by default will bubble & is cancelable */
dispatchCustomEvent(eventName: string, data?: any, isBubbling: boolean = true, isCancelable: boolean = true) {
  const eventInit: CustomEventInit = { bubbles: isBubbling, cancelable: isCancelable };
  if (data) {
    eventInit.detail = data;
  }
  return this.elm.nativeElement.dispatchEvent(new CustomEvent(eventName, eventInit));
}

一切都很美好,生活也很美好……

启用时它会中断strictTemplates

当我决定启用strictTemplates进入角度编译器选项那是 Angular 开始抱怨的时候$event成为一种类型Event它抱怨说detail不是有效的属性,但在我的实现中它不是类型Event,它应该被检测为类型CustomEvent.

为什么 Angular 没有将其检测为CustomEvent?有没有什么方法可以强制将类型检测为CustomEvent或覆盖类型CustomEvent没有 Angular 的抱怨?

到目前为止,我发现绕过这些错误的唯一(丑陋的)方法是让它认为它是一种类型Event但然后将其投射回CustomEvent这可行,但它添加了很多代码,这很不方便

<angular-slickgrid gridId="grid28"
    [columnDefinitions]="columnDefinitions"
    [gridOptions]="gridOptions"
    [dataset]="dataset"                    
    (onSelectedRowsChanged)="handleOnSelectedRowsChanged($event)">
</angular-slickgrid>

然后投射Event to CustomEvent尽管这有效,但它添加了很多代码,这很不方便

handleOnSelectedRowsChanged(event: Event) {
    const args = (event as CustomEvent).detail.args as OnSelectedRowsChangedEventArgs;
    console.log(args);
}

我不想也不能使用事件发射器,因为这些事件是动态的,并且这些事件来自 JavaScript 库,还有其他技术原因,但我再次无法使用事件发射器。

enter image description here

这可以通过 Angular 指令解决吗?我见过这个其他的Angular 4 触发自定义事件 - EventEmitter 与dispatchEvent()有点走那条路,但我仍然不确定该怎么做。


使用$any()禁用类型检查的函数$event可能会绕过这个错误。

<angular-slickgrid gridId="grid28"
    [columnDefinitions]="columnDefinitions"
    [gridOptions]="gridOptions"
    [dataset]="dataset"                    
    (onSelectedRowsChanged)="handleOnSelectedRowsChanged($any($event))">
</angular-slickgrid>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在没有“strictTemplates”的情况下使用自定义事件(而不是事件发射器)来抱怨“$event”不是自定义事件类型? 的相关文章

随机推荐