如何在Office Dialog Eventhandler函数中运行函数？

Question

我在Angular2 Microsoft Office加载项项目中使用此代码，该项目使用Javascript API显示Office Dialog。

Office.context.ui.displayDialogAsync(url, {height: 34, width: 20, displayInIframe: true},function (asyncResult) {
  if (asyncResult.status !== Office.AsyncResultStatus.Succeeded) {
    // TODO: Handle error.
    return;
  }

  // Get the dialog and register event handlers.
  dialog = asyncResult.value;

  dialog.addEventHandler(Office.EventType.DialogMessageReceived, function (asyncResult) {
    if (asyncResult.type !== Office.EventType.DialogMessageReceived) {
      return;
    }
    this.router.navigate(['/user'],1);
    dialog.close();
  });
});

我收到这个错误：

TypeError: this.router is undefined

路由器在组件构造函数中定义的位置。

constructor( private route: ActivatedRoute,
private router: Router,
private location: Location) { }

所以问题是，如何在DialogEvenentHandler回调函数中使用该路由器导航到该URL？

Answer 1

问题是你没有为你的处理程序使用箭头函数，你的this上下文会丢失。

将处理程序更改为箭头函数，一切都应该正常工作。

Office.context.ui.displayDialogAsync(url, {height: 34, width: 20, displayInIframe: true}, asyncResult => {
  // ...
  dialog.addEventHandler(Office.EventType.DialogMessageReceived, asyncResult => {
    // ...
  });
});