微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决如何在没有 `strictTemplates` 的情况下使用自定义事件不是事件发射器来抱怨 `$event` 不是自定义事件类型?

我创建了一个名为 Angular-Slickgrid 的 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 时中断

当我决定在 angularCompilerOptions 中启用 strictTemplates 时,Angular 开始抱怨 $eventEvent 类型并且它抱怨 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 强制转换为 CustomEvent,即使这样有效,它也会添加很多不方便的代码

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

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

enter image description here

这可以通过 Angular 指令修复吗?我已经看到了另一个 SO Angular 4 trigger custom event - EventEmitter vs dispatchEvent(),它有点走那条路,但我仍然不确定该怎么做。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。