How to use Dialog api in separate class?

[Edward-Zhou]

Message from office-js bot: We’re closing this issue because it has been inactive for a long time. We’re doing this to keep the issues list manageable and useful for everyone. If this issue is still relevant for you, please create a new issue. Thank you for your understanding and continued feedback.

I am developing with Excel Addin and Dialog api, I am able to show dialog and send message from parent to child dialog.

But, after I move the part code to a separate class, it can show the dialog, but the dialog fail to receive the message.

here is a class

/* global Office */

import { AppConsts } from "../shared/appconsts";
import { DialogEventArg, DialogInput } from "../shared/dialoginput";
import { CommonService } from "./common.service";

var dialog: Office.Dialog;

export class DialogService {
  async showErrorDialog(error: string) {
    let errorInput = new DialogInput<string>({
      name: AppConsts.ErrorDialog,
      width: 50,
      height: 30,
      body: error,
    });
    await this.showDialog(errorInput);
  }
  async showDialog(dialogInput: DialogInput<any>) {
    CommonService.log(JSON.stringify(dialogInput));
    Office.context.ui.displayDialogAsync(
      `${AppConsts.appBaseUrl}/dialog.html`,
      { height: dialogInput.height, width: dialogInput.width },
      function (asyncResult) {
        dialog = asyncResult.value;
        dialog.addEventHandler(Office.EventType.DialogMessageReceived, this.dialogMessageFromChild);
        dialog.addEventHandler(Office.EventType.DialogEventReceived, this.dialogEventFromChild);
        setTimeout(function () {
          dialog.messageChild(JSON.stringify(dialogInput));
        }, 2000);
      }
    );
  }
  dialogMessageFromChild(arg: DialogEventArg) {
    CommonService.log(JSON.stringify(arg));
    dialog.close();
  }
  dialogEventFromChild(arg: DialogEventArg) {
    switch (arg.error) {
      case 12002:
        CommonService.log(
          "The dialog box has been directed to a page that it cannot find or load, or the URL syntax is invalid."
        );
        break;
      case 12003:
        CommonService.log("The dialog box has been directed to a URL with the HTTP protocol. HTTPS is required.");
        break;
      case 12006:
        CommonService.log("Dialog closed.");
        break;
      default:
        CommonService.log("Unknown error in dialog box.");
        break;
    }
  }
}

And I call it from command.ts like

async function login(event: Office.AddinCommands.Event) {
  await dialogService.showErrorDialog("This is Test Error");
  event.completed();
}

[RuizhiSunMS]

@lliu113 could you please have a look on this?