Angular Outlook加载项任务窗格数据绑定失效问题

Outlook加载项内嵌的Web视图运行环境和普通独立浏览器存在差异：Office.js初始化时的运行上下文会打断Zone.js对DOM事件、异步任务的劫持，导致点击Run按钮触发的run()方法实际运行在Angular的NgZone作用域之外，Angular自带的变更检测无法捕获到welcomeMessage属性的修改，因此页面不会同步更新，也不会抛出任何控制台报错。直接通过浏览器访问taskpane.html时没有Office.js的上下文干扰，Zone.js正常工作，因此功能表现正常。

按以下步骤调整代码即可：

• 确认zone.js的导入顺序：必须放在所有Angular相关依赖导入的最前面，避免Zone被重复初始化或后置加载导致事件劫持失效，当前taskpane.ts中的导入顺序符合要求，不要随意调整。
• 启用代码中注释掉的NgZone注入逻辑，所有需要触发视图更新的操作、调用Outlook API的逻辑都要包裹在zone.run()回调中，强制代码回到Angular的变更检测上下文执行。
• 补全初始化逻辑：Office初始化完成后手动隐藏默认生成的侧加载提示元素，避免遮挡Angular渲染的页面内容。

修正后代码 #

taskpane.ts #

/*
 * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 * See LICENSE in the project root for license information.
 */
// zone.js 必须保持在所有Angular导入的最顶部，不可调整顺序
import "zone.js"; 
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import AppModule from "./app/app.module";

/* global console, document, Office */

Office.onReady(() => {
  // 隐藏侧加载提示
  document.getElementById("sideload-msg")!.style.display = "none";

  // 启动Angular应用
  platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch((error) => console.error(error));
});

app.component.ts #

import { Component, NgZone } from "@angular/core";
@Component({
  selector: "app-home",
  templateUrl: "./app.component.html",
})
export default class AppComponent {
  // 注入NgZone
  constructor(private zone: NgZone) {}
  public welcomeMessage = "Welcome";
  async run() {
    this.zone.run(()=>{
      this.welcomeMessage = "I am changed";
      // 后续所有Outlook API调用、视图更新相关逻辑都放在该回调内
    })    
  }
}

验证注意事项：修改完成后重新编译项目，清空加载项Web视图缓存后再测试。如果是桌面版Outlook（使用WebView2内核），可以在任务管理器结束所有Microsoft Outlook WebView2进程后重启Outlook，避免旧缓存导致修改不生效。

内容的提问来源于stack exchange，提问作者Bh00shan