Angular 5 Excel Office App 通信未从对话框到任务窗格答案

【问题标题】：Angular 5 Excel Office App Communication not happening from Dialog to Task PaneAngular 5 Excel Office App 通信未从对话框到任务窗格
【发布时间】：2018-05-11 01:14:44
【问题描述】：

我们在从 Dialog 向 Angular 5 Excel 单页应用程序中的任务窗格发送消息时遇到问题

我们能够打开对话框窗口，但是当我们从对话框向任务窗格发送消息时，回调事件没有触发。请在下面找到我们的代码。

任务窗格中的代码：

openMainWindow() {
  this.message = "opening dialog";
  Office.context.ui.displayDialogAsync(
    "https://localhost:3000/#/mainwindow",
    { height: 100, width: 100 },
    this.callBack
  );
}

callBack(result) {
  this.message = "opened dialog";
  this.dialog = result.value;
  this.dialog.addEventHandler(Office.EventType.DialogMessageReceived, this.processMessage);
  this.message = this.dialog.toString();
}

上面的回调事件没有触发。

processMessage(arg) {
    this.message = "received a message from dialog";
    this.dialog.close();
    this.message = arg.message;
}

对话窗口中的代码：

sendMessage() {
    this.message = "sending message to parent";
    Office.context.ui.messageParent("this is the message from child");
}

我们已经使用 JQuery（多页）测试了相同的功能，它工作正常，我们能够从 Dialog 发送和接收消息。

如果可能，请帮助我们或将我们指派给您团队中的某个人，以使用 Angular Excel 应用程序解决此问题。

【问题讨论】：

附带说明，Stack Overflow 不是 Microsoft 站点，它是一个社区站点（它由 Stack Exchange Inc. 拥有和运营）。虽然许多公司都有来自产品团队的人员监控 Stack（包括 Microsoft），但这里的大多数答案都来自其他社区成员。一个典型的例子是 Stack 上排名第一的 Jon Skeet。他主要回答 C# 问题，但他不仅不在 C# 团队中，而且还是 Google 的工程师（而且非常聪明，但我离题了）。当你提出问题时要记住一些事情。尤其是 Angular（一个 Google 框架）。

标签： angular typescript office-js

【解决方案1】：

有一个非常有价值的页面，涵盖了 Angular 在构建 Office Web 插件时提出的一些独特问题：Develop Office Add-ins with Angular。

Dialog API docs 中还有一个关于 SPA 网络应用程序的重要说明：

对话框在一个新窗口中，有自己的执行上下文。如果您传递一个路由，您的基页及其所有初始化和引导代码将在这个新上下文中再次运行，并且所有变量都会在对话框窗口中设置为其初始值。因此，这种技术会在对话窗口中启动您的应用程序的第二个实例。在对话窗口中更改变量的代码不会更改相同变量的任务窗格版本。同样，对话框窗口有自己的会话存储，任务窗格中的代码无法访问它。

我相信您在这里遇到的问题与this 没有指向您期望的对象有关。您应该将回调绑定到正确的 this 对象：

openMainWindow() {
  this.message = "opening dialog";
  Office.context.ui.displayDialogAsync(
    "https://localhost:3000/#/mainwindow",
    { height: 100, width: 100 },
    this.callBack.bind(this));
}

【讨论】：