我创建了一个 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 库,还有其他技术原因,但我再次无法使用事件发射器。
这可以通过 Angular 指令解决吗?我见过这个其他的Angular 4 触发自定义事件 - EventEmitter 与dispatchEvent()有点走那条路,但我仍然不确定该怎么做。