如何围绕 Office.js Excel 事件处理程序包装 Observable答案

【问题标题】：How to Wrap Observable Around Office.js Excel Event Handler如何围绕 Office.js Excel 事件处理程序包装 Observable
【发布时间】：2019-11-18 08:02:10
【问题描述】：

在 Office.js，特别是 Excel 中，您可以添加/注册事件处理程序（从技术上讲是 Promises）。例如，微软的文档给出了这个例子：

await Excel.run(async (context) => {
    let sheet = context.workbook.worksheets;
    sheet.onAdded.add(onWorksheetAdd);

    await context.sync();
    console.log("A handler has been registered for the OnAdded event.");
});

我目前在 Angular 中工作，所以我想将所有这些 async 代码“争吵”到 observable 中，以便对 Excel 文档上发生的所有事情有一定的控制感。在上面的示例中，我们正在监听用户何时添加新的工作表。 onWorksheetAdd 将注册该事件处理程序，以便当用户执行操作（添加新工作表）时，将调用 onWorksheetAdd 回调/承诺。

以下是我目前拥有的。

excel-worksheet.service.ts

registerOnAddWorksheetHandler() {
        return from(
            // @ts-ignore
            Excel.run((context) => {
                    let sheet = context.workbook.worksheets;
                    sheet.onAdded.add(this.excelEventHandlerService.onAddWorksheetHandler) ; // must pass Promise as argument

                    console.log("A handler has been registered for the OnAdded event.");
                }
                return context.sync();
            })
        );
    }

excel-event-handler.service.ts

 onAddWorksheetHandler(event): Promise<any> {
        return of(
            // @ts-ignore
            Excel.run((context) => {
                    console.log("Handler for worksheet onAdded event has been triggered. Newly added worksheet Id : " + event.worksheetId, event);

                return context.sync();
            })
        )
        .toPromise()
    }

本质上，我想要将事件处理程序包装在 Observable 中，以便我的 app.component.ts 可以将信息注册到我的应用程序。

我尝试了以下方法：

在onAddWorksheetHandler 内，我试图继续解决 Promise。我在context.sync() 之后调用了.then()，然后在Excel.run() 上再次调用它，然后在toPromise() 之后调用它。但这是不成功的，因为registerOnAddWorksheetHandler 已经注册了该事件并且无法访问它的值。主要是因为 Office.js 是基于 Promise 的，所以执行是一劳永逸的。
我尝试在excel-event-handler.service.ts 上声明Subject，以便app.component.ts 可以访问，但也失败了。我不确定注册的事件处理程序是否正在吞噬任何试图冒泡的东西。

我试图解决这个问题的最后努力只是将那些注册的事件处理程序移动到app.component.ts 以访问范围。我希望能更优雅地做到这一点。

【问题讨论】：

标签： excel angular typescript promise office-js

【解决方案1】：

这是我的一个误解。一个只见树木不见森林的案例。对于 office.js 事件处理程序，您只需要执行Excel.run() 和context.sync() 命令即可真正注册<some_callback()>。

Excel.run((context) => {
  let sheet = context.workbook.worksheets;
  sheet.onAdded.add(<some_callback()>);
  return context.sync();
})

我的困惑在于，我认为整个 Excel.run() 舞蹈必须全部在 <some_callback()> 内执行。事实证明不是，您可以将其作为典型的 JS 回调。在 Angular 中，这可以是组件中需要执行的任何方法。相同的逻辑适用于任何其他框架。

我希望这对其他人有所帮助。

【讨论】：