无法访问 angular-slickgrid 的服务回调订阅答案

【问题标题】：can't able access the service callback subscription of angular-slickgrid无法访问 angular-slickgrid 的服务回调订阅
【发布时间】：2022-12-06 06:11:22
【问题描述】：

我们目前正在将 angular-slickgrid 从版本 2.30.4 升级到 3.3.2。

在迁移到版本 3 期间，我们无法访问 onPaginationChanged 和来自 angularGridInstance 的其他回调，如下所述。

this.angularGrid.paginationService.onPaginationChanged.subscribe(e => {
    this.writeConsole('Info', this.constructor.name, 'onPaginationChanged', type, '-', e);
    this.changeSelectionHeader(assignmentObject['internalProcess']['angularGrid'].slickGrid, assignmentObject['internalProcess']['angularGrid'].dataView);
})

我们已经浏览了您的文档并分析了我们可以从 <angular-slickgrid> 标记中获取此回调，但是，我们是否有可能通过上述格式中提到的打字稿本身访问它们。

【问题讨论】：

在 Angular-Slickgrid >=3.x 中它们都是自定义事件，你不能使用 subscribe 但你可以在网格 DOM 元素上使用常规的 JS 事件监听器。你的问题很难理解，你应该尝试提供更多关于你在下一个问题上尝试过的信息
您好@ghiscoding，在查看您的源代码后，我们了解到我们可以订阅 eventPubSubService 以使用回调，如 onPaginationChanged、onGridBeforeResize 等...我如何从我的源代码访问 eventPubSubService
如果我在下面的回答有用，请点赞，以便其他有相同问题的人知道这是有效的。谢谢

标签： angular slickgrid angular-slickgrid

【解决方案1】：

Angular-Slickgrid >=3.x 事件实际上都是 JS 自定义事件，所以你可以使用任何 JavaScript 方式来监听事件变化，这样就可以了。你有很多方法来处理你想做的事情

1. 默认和记录方式 - 模板事件

Template Custom Events - Wiki

<angular-slickgrid gridId="grid1"
                     [columnDefinitions]="columnDefinitions"
                     [gridOptions]="gridOptions"
                     [dataset]="dataset"
                     (onPaginationChanged)="onPaginationChanged($event.detail)">
</angular-slickgrid>

2.使用网格状态

记录在Grid State & Preset - Wiki 中，让您可以访问多种内容，例如过滤器、排序、分页、固定

<angular-slickgrid gridId="grid1"
                     [columnDefinitions]="columnDefinitions"
                     [gridOptions]="gridOptions"
                     [dataset]="dataset"
                     (onGridStateChanged)="gridStateChanged($event.detail)">
</angular-slickgrid>

gridStateChanged(gridStateChanges: GridStateChange) {
    console.log('Grid State changed:: ', gridStateChanges);
}

3. 在自定义事件上使用 JS `addEventListener`

ngAfterViewInit() { 
 document.querySelector('[gridid="grid1"]')?.addEventListener('onPaginationChanged', (data: any) => {
    console.log('event listener pagination changed', data)
  })
}

4.使用component ref访问Angular-Slickgrid私有服务

根本不推荐，这是作弊，将来可能会崩溃

考虑到 EventPubSubService 是一个 private 属性（谁知道这可能会在未来中断），我真的很惊讶这个工作，但似乎添加一个组件引用让我们可以访问 Angular-Slickgrid 网格的整个实例甚至 private 服务变量。

从技术上讲，这不应该被 Angular/TypeScript 允许，但从今天开始你可以作弊了。

<angular-slickgrid gridId="grid1" #myGridRef
                     [columnDefinitions]="columnDefinitions"
                     [gridOptions]="gridOptions"
                     [dataset]="dataset">
</angular-slickgrid>

ngAfterViewInit() {
  this.myGridRef._eventPubSubService.subscribe('onPaginationChanged', (data:any)=> console.log('pagination changed', data))
  console.log('eventPubSub',  this.myGridRef._eventPubSubService)
}

5. 将`EventPubSubService` 暴露给 AngularGridInstance

似乎这项服务还没有暴露给AngularGridInstance，我可能会在未来的版本中添加它，但我最近（本周）发布了 Angular-Slickgrid 的 v5.0.0 版本，我从不使用旧版本版本所以对于这个用例，你必须升级才能访问这个案例

需要一个新的 Angular-Slickgrid 特性（现在 v5.1.0 可用），可能在未来

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
    
    this.angularGrid.eventPubSubService.subscribe('onPaginationChanged', (data:any)=> console.log('pagination changed', data))
}

最后说明

显然，在 99% 的情况下，最佳选择是选项 1 和/或选项 2（这就是它被记录的原因），而其他选项确实有效，但它们显然不是理想的解决方案，因此也没有记录，最后一个选项 5 似乎也有效并且可能会在不久的将来到达（现在可用）但仅限于 Angular-Slickgrid >=5.x 因为我是一个单身开发者并且这个项目是开源的并且我没有得到支持所以我只提供对最新版本的支持，截至今天是v5.0.0 及更高版本

最后一点，我总是在每个版本之间提供迁移指南，并且以正确的顺序遵循它们很重要（在您的情况下Migration to 3.x，这些指南中已经回答了与迁移相关的大多数答案。

【讨论】：