如何在Angular JS与Angular应用之间实现数据共享？

方案1：利用 localStorage/sessionStorage #

这是最轻量化的跨应用数据共享方式，适合传递非敏感数据。

• Angular JS 端写入数据：

  // AngularJS 控制器或服务中
  const sharedData = { userId: 123, userName: 'test_user' };
  localStorage.setItem('crossAppData', JSON.stringify(sharedData));
  

• Angular 端读取并监听数据变化：
  在Angular组件中，可直接读取初始数据，也能监听storage事件获取实时更新：

  // Angular 组件
  import { Component, HostListener, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
  })
  export class AppComponent implements OnInit {
    sharedData: any;
  
    ngOnInit() {
      // 读取初始存储数据
      const storedData = localStorage.getItem('crossAppData');
      if (storedData) {
        this.sharedData = JSON.parse(storedData);
      }
    }
  
    // 监听其他应用修改存储的事件
    @HostListener('window:storage', ['$event'])
    onStorageChange(event: StorageEvent) {
      if (event.key === 'crossAppData') {
        this.sharedData = JSON.parse(event.newValue || '{}');
      }
    }
  }
  

方案2：使用 PostMessage API #

适合跨端口/跨域的实时数据传递，无需依赖本地存储，可直接定向发送数据。

场景1：Angular JS 应用通过 iframe 嵌入 Angular 应用 #

• Angular JS 端发送消息：

  // AngularJS 中获取目标iframe元素
  const angularIframe = document.getElementById('angular-app-frame');
  const data = { type: 'user_sync', content: { id: 456, role: 'admin' } };
  // 必须指定目标应用的origin，防止消息泄露
  angularIframe.contentWindow.postMessage(data, 'http://localhost:4200');
  

• Angular 端监听消息：

  // Angular 组件
  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
  })
  export class AppComponent implements OnInit {
    ngOnInit() {
      window.addEventListener('message', (event) => {
        // 验证消息来源，过滤非法请求
        if (event.origin === 'http://localhost/testsite') {
          const receivedData = event.data;
          console.log('Received from AngularJS:', receivedData);
          // 此处添加数据处理逻辑
        }
      });
    }
  }
  

场景2：两个应用独立打开（通过窗口引用） #

• Angular JS 端打开Angular应用并发送消息：

  // AngularJS 中打开新窗口
  const angularWindow = window.open('http://localhost:4200');
  // 延迟发送确保窗口加载完成
  setTimeout(() => {
    const data = { action: 'sync_items', payload: [1, 2, 3] };
    angularWindow.postMessage(data, 'http://localhost:4200');
  }, 2000);
  

• Angular 端监听逻辑与场景1一致，无需修改。

方案3：通过共享后端API中转 #

如果两个应用可访问同一个后端服务，可通过接口实现数据中转：

• Angular JS 端提交数据到后端：

  // AngularJS 使用$http提交
  $http.post('/api/cross-app-data', { source: 'AngularJS', content: 'shared_content' })
    .then(res => console.log('Data saved to backend'));
  

• Angular 端从后端拉取数据：

  // Angular 使用HttpClient
  import { HttpClient } from '@angular/common/http';
  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
  })
  export class AppComponent implements OnInit {
    constructor(private http: HttpClient) {}
  
    ngOnInit() {
      this.http.get('/api/cross-app-data').subscribe(data => {
        console.log('Data from backend:', data);
        // 处理拉取到的数据
      });
    }
  }
  

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