5

我创建了一个名为Angular-Slickgrid的 Angular 库，它是 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

当我决定启用strictTemplatesangularCompilerOptions时，Angular 开始抱怨它$event是一种类型Event并且它抱怨它detail不是一个有效的属性，但在我的实现中它不是 type Event，它应该被检测为 type 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);
}

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

在此处输入图像描述

这可以通过 Angular 指令解决吗？我已经看到了另一个 SO Angular 4 触发自定义事件 - EventEmitter vs dispatchEvent()有点走这条路，但我仍然不确定该怎么做。

4

1 回答 1

1

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

<angular-slickgrid gridId="grid28"
    [columnDefinitions]="columnDefinitions"
    [gridOptions]="gridOptions"
    [dataset]="dataset"                    
    (onSelectedRowsChanged)="handleOnSelectedRowsChanged($any($event))">
</angular-slickgrid>
于 2021-08-13T02:52:12.850 回答