Angular使用Service实现跨组件通信失效，获取值始终为初始值

问题根因 #

你的@Injectable({providedIn: 'root'})写法本身完全符合Angular规范，在同一个Angular应用实例下确实会生成全局唯一的EmailFormatService单例。你遇到的多实例问题是因为使用了Office.js的displayDialogAsync接口：这个接口打开的对话框是完全独立的浏览器运行上下文，相当于启动了另一个独立的Angular应用实例，两个窗口的运行环境完全隔离，自然会生成两份Service实例，数据无法共享。

可行解决方案 #

方案1：使用Office官方跨对话框消息API（推荐）

Office.js原生提供了对话框和主窗口的消息传递能力，是这类场景的官方推荐实现方案：

1. 主窗口打开对话框时拿到实例，监听加载完成事件后发送数据：

public openDialogWindow(
  event: OpenDialogEvent | undefined,
  route: string,
  message?: string,
) {
  let dialog: Office.Dialog;
  Office.context.ui.displayDialogAsync(
    `${this._mailConfigService.environment.verbMail.addInUrl}/index.html#/${route}`,
    { width: 30, height: 20 }, // 可按需调整窗口尺寸
    (asyncResult) => {
      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
        dialog = asyncResult.value;
        // 对话框加载完成后发送消息
        dialog.addEventHandler(Office.EventType.DialogEventReceived, () => {
          dialog.messageChild(JSON.stringify({ 
            type: 'videoMessage', 
            content: 'hello' 
          }));
        });
      }
    }
  );
}

2. 子窗口监听父窗口发送的消息，更新本地数据：

import { ChangeDetectorRef } from '@angular/core';

public message!: string;

public constructor(private cdr: ChangeDetectorRef) {
  // 注册父窗口消息监听
  Office.context.ui.addHandlerAsync(
    Office.EventType.DialogParentMessageReceived,
    (event: Office.DialogParentMessageReceivedEventArgs) => {
      const data = JSON.parse(event.message);
      if (data.type === 'videoMessage') {
        this.message = data.content;
        // 手动触发变更检测，确保Angular感知到数据更新
        this.cdr.detectChanges();
      }
    }
  );
}

方案2：使用本地存储共享数据

如果数据是可序列化的普通类型，也可以通过localStorage/sessionStorage实现跨窗口共享，实现更简单：

1. 主窗口设置数据时同步写入存储：

this._emailService.setVideoMessage("hello");
localStorage.setItem('videoMessage', 'hello');

2. 子窗口初始化时读取存储，同时监听存储变化实时更新：

import { ChangeDetectorRef } from '@angular/core';

public message!: string;

public constructor(private cdr: ChangeDetectorRef) {
  // 初始化读取数据
  this.message = localStorage.getItem('videoMessage') || 'False';
  // 监听存储变化，实时更新数据
  window.addEventListener('storage', (e) => {
    if (e.key === 'videoMessage') {
      this.message = e.newValue || 'False';
      this.cdr.detectChanges();
    }
  });
}

额外排查点 #

如果排除Office对话框的隔离问题后仍然出现多实例情况，可以检查是否在某个NgModule、Component的providers数组中额外声明了EmailFormatService，多余的声明会强制Angular生成新的Service实例，删除这些声明即可。

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