Angular 5 Excel Office App Связь не происходит от диалогового окна до панели задач

Question

Мы столкнулись с проблемой при отправке сообщения из диалогового окна на панель задач в нашем одностраничном приложении 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 (несколько страниц), и она работает нормально, мы можем отправлять и получать сообщения из диалога.

Если возможно, помогитеили направьте нас к кому-нибудь из вашей команды, чтобы решить эту проблему с помощью приложения Angular Excel.

Answer 1

Существует очень ценная страница, на которой рассматриваются некоторые уникальные проблемы, возникающие в Angular при создании надстроек Office Web: Разработка надстроек Office с помощью Angular .

В документах Dialog API также имеется важное примечание, касающееся веб-приложений SPA:

Диалоговое окно находится в новом окне с собственным контекстом выполнения. Если вы пройдете маршрут, ваша базовая страница и весь ее код инициализации и начальной загрузки снова запустятся в этом новом контексте, и для всех переменных в диалоговом окне будут установлены их начальные значения. Таким образом, этот метод запускает второй экземпляр вашего приложения в диалоговом окне. Код, который изменяет переменные в диалоговом окне, не меняет версию той же переменной на панели задач. Аналогично, диалоговое окно имеет свое собственное хранилище сеансов, которое недоступно из кода на панели задач.

Я полагаю, что ваша проблема здесь связана с this не указанием на объект, который вы ожидаете тоже. Вы должны привязать обратный вызов к правильному this объекту:

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