OfficeJS addHandlerAsync 回调不执行 angular 组件方法

Question

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

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

在我的 Component.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），但未定义 returns zone.run .

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

Answer 1

好老有名this关键字问题。

您收到该错误消息是因为上下文不同。当您编写代码时，方法 selectMailChanged 会引用组件中的方法 getPhoneNumbers（我希望您已实现）。所以编码方面看起来不错。

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

1. How to access the correct `this` inside a callback?
2. https://thenewstack.io/mastering-javascript-callbacks-bind-apply-call/
3. https://technology.amis.nl/2016/08/23/access-the-original-calling-context-in-a-callback-function-in-typescript/

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