OfficeJS addHandlerAsync 回调不执行角度组件方法答案

【问题标题】：OfficeJS addHandlerAsync callback does not execute angular component methodOfficeJS addHandlerAsync 回调不执行角度组件方法
【发布时间】：2020-01-25 10:26:11
【问题描述】：

我正在开发一个 Outlook Web 插件（在 Angular 5 中），我正在实现一个可固定的任务窗格，并且我一直在关注 Microsoft 的此文档：Implement a pinnable task pane in Outlook。

我想要做的是当 Outlook 中选定的邮件发生更改时，我需要更新我的任务窗格 UI 的内容。

在我的组件上.TS 我添加了以下 addHandlerSync 事件侦听器以更改邮件选择：

ngOnInit() {
    Office.context.mailbox.addHandlerAsync(Office.EventType.ItemChanged, this.selectMailChanged);
}
selectMailChanged(){
    this.getPhoneNumbers() //This function gets phone numbers on the email
}

以上代码的错误是

this.getPhoneNumbers is not defined.

我尝试将这个 this.getPhoneNumbers 附在区域上（基于 MS Documentation: Trigger the UI update），但它返回 zone.run 未定义。

如何在 addHandlerAsync 回调中调用 Angular 组件方法？

【问题讨论】：

标签： javascript angular office-js outlook-web-addins

【解决方案1】：

好老出名的this关键字问题。

由于上下文差异，您会收到该错误消息。当您编写代码时，方法selectMailChanged 引用了您的组件中的方法getPhoneNumbers（我希望您已经实现了它）。所以在编码方面看起来不错。

但是当事件开始时——它不再有组件的上下文，因为它只是调用一个回调函数——所以除了它调用的函数之外，它实际上并没有所有的外部世界信息。您可以在下面阅读一些很好的答案：

将getPhoneNumbers中的功能移到回调方法中，应该不会有这个问题。

【讨论】：

感谢您的精彩见解！我能够解决问题。