如何在NX工作区中实现两个Angular应用间的数据传输？

当然可以在NX工作区的两个Angular应用之间共享数据，下面是几种实用的实现方案，其中你提到的**共享库（shared-library）**是最契合NX生态的首选方案。

1. 共享库（Shared Library）方案 #

这是NX设计的核心场景之一，通过共享库封装共享数据、服务或状态逻辑，让多个应用复用：

步骤示例： #

• 先创建共享库（如果还没建）：

  nx generate library shared-data
  

• 在共享库中定义共享服务，用RxJS的BehaviorSubject实现数据同步：

  // shared-data/src/lib/services/shared-state.service.ts
  import { Injectable } from '@angular/core';
  import { BehaviorSubject } from 'rxjs';
  
  @Injectable({ providedIn: 'root' })
  export class SharedStateService {
    // 用BehaviorSubject保存共享数据，支持订阅更新
    private _sharedData = new BehaviorSubject<string>('初始数据');
    sharedData$ = this._sharedData.asObservable();
  
    // 更新共享数据的方法
    updateSharedData(data: string): void {
      this._sharedData.next(data);
    }
  }
  

• 在两个Angular应用中导入并使用这个共享库：
  比如在App1的组件中更新数据：

  // app1/src/app/app.component.ts
  import { Component } from '@angular/core';
  import { SharedStateService } from '@your-workspace/shared-data';
  
  @Component({
    selector: 'app1-root',
    template: `
      <input [(ngModel)]="inputVal" (input)="syncData()" />
      <p>App1 当前共享数据: {{ currentData }}</p>
    `
  })
  export class AppComponent {
    inputVal = '';
    currentData = '';
  
    constructor(private sharedState: SharedStateService) {
      // 订阅共享数据的变化
      this.sharedState.sharedData$.subscribe(data => {
        this.currentData = data;
      });
    }
  
    syncData(): void {
      // 更新共享数据
      this.sharedState.updateSharedData(this.inputVal);
    }
  }
  

  再在App2的组件中订阅数据：

  // app2/src/app/app.component.ts
  import { Component } from '@angular/core';
  import { SharedStateService } from '@your-workspace/shared-data';
  
  @Component({
    selector: 'app2-root',
    template: `<p>App2 获取到的共享数据: {{ currentData }}</p>`
  })
  export class AppComponent {
    currentData = '';
  
    constructor(private sharedState: SharedStateService) {
      this.sharedState.sharedData$.subscribe(data => {
        this.currentData = data;
      });
    }
  }
  

  这样两个应用就能实时同步共享数据了。

2. 本地存储（LocalStorage/SessionStorage） #

如果应用需要持久化数据，或者部署在同域名下，可借助浏览器本地存储：

• 在一个应用中存储数据：

  // 存储复杂数据记得转JSON
  localStorage.setItem('shared_data', JSON.stringify({ name: 'test', value: 123 }));
  

• 在另一个应用中监听存储变化（同域名下有效）：

  window.addEventListener('storage', (event) => {
    if (event.key === 'shared_data') {
      const data = JSON.parse(event.newValue || '{}');
      // 处理获取到的数据
      console.log('共享数据更新:', data);
    }
  });
  

  这种方式适合简单数据，注意敏感数据不要存在本地存储。

3. URL参数传递 #

如果是一次性跳转传递数据，可用URL查询参数：

• 在App1中跳转时带参数：

  navigateToApp2(): void {
    const data = encodeURIComponent('需要传递的内容');
    window.location.href = '/app2?shared=' + data;
  }
  

• 在App2中获取参数：

  import { ActivatedRoute } from '@angular/router';
  
  constructor(private route: ActivatedRoute) {
    this.route.queryParams.subscribe(params => {
      const sharedData = decodeURIComponent(params['shared'] || '');
      console.log('从App1获取的数据:', sharedData);
    });
  }
  

注意事项 #

• 使用共享库时，确保服务用providedIn: 'root'，避免每个应用创建独立实例，否则数据无法同步
• 若两个应用部署在不同域名，本地存储监听会失效，此时可通过后端API做数据中转
• 复杂状态管理可在共享库中集成NgRx，统一管理跨应用的全局状态

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