如何在同一服务器的两个Angular 4应用间传递数据？

既然你在同一服务器部署了两个独立的Angular 4应用（/booking/和/map/），之前靠表单POST传数据，那我给你几个适配Angular场景的可行方案，你可以根据数据的敏感程度、复杂度来选：

方案1：模拟原生表单POST（最贴近你的原有方式） #

你可以在Angular里动态创建一个隐藏的表单，复刻之前的POST提交逻辑，这样map应用就能像处理普通表单提交一样接收数据。

代码示例（在booking应用的组件里）：

import { Component, Renderer2, ElementRef } from '@angular/core';

@Component({
  selector: 'app-booking',
  templateUrl: './booking.component.html'
})
export class BookingComponent {
  constructor(private renderer: Renderer2, private el: ElementRef) {}

  sendDataToMap() {
    // 要传递的数据
    const postData = {
      bookingId: '12345',
      location: 'Beijing'
    };

    // 创建form元素
    const form = this.renderer.createElement('form');
    this.renderer.setAttribute(form, 'method', 'POST');
    this.renderer.setAttribute(form, 'action', '/map/');
    this.renderer.setStyle(form, 'display', 'none');

    // 把数据转成隐藏input
    Object.keys(postData).forEach(key => {
      const input = this.renderer.createElement('input');
      this.renderer.setAttribute(input, 'type', 'hidden');
      this.renderer.setAttribute(input, 'name', key);
      this.renderer.setAttribute(input, 'value', postData[key]);
      this.renderer.appendChild(form, input);
    });

    // 添加到DOM并提交
    this.renderer.appendChild(this.el.nativeElement, form);
    form.submit();
    // 提交后移除表单
    this.renderer.removeChild(this.el.nativeElement, form);
  }
}

在map应用端，你可以通过后端框架获取POST参数，再把数据注入到Angular应用中（比如在index.html里添加全局变量<script>window.mapInitData = <%= postData %></script>，然后Angular读取window.mapInitData即可）。

方案2：URL查询参数（GET方式，适合非敏感数据） #

如果数据不涉及敏感信息，直接通过URL查询参数传递是最简单的方式，不需要依赖服务器或存储。

在booking应用里跳转时带参数：

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

@Component({
  selector: 'app-booking',
  templateUrl: './booking.component.html'
})
export class BookingComponent {
  navigateToMap() {
    const data = {
      bookingId: '12345',
      location: 'Beijing'
    };
    // 构造查询参数
    const queryParams = new URLSearchParams(data).toString();
    // 直接跳转到map应用（不同应用不能用Angular Router，必须用原生跳转）
    window.location.href = `/map/?${queryParams}`;
  }
}

然后在map应用的根组件里读取参数：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      const bookingId = params['bookingId'];
      const location = params['location'];
      // 处理拿到的数据
      console.log('Received data from booking app:', bookingId, location);
    });
  }
}

方案3：浏览器SessionStorage（适合中等敏感数据，同一会话内有效） #

如果数据不想暴露在URL里，且只需要在当前浏览器会话内有效，可以用SessionStorage。因为两个应用在同一服务器（同一域名）下，SessionStorage是共享的。

在booking应用里存储数据并跳转：

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

@Component({
  selector: 'app-booking',
  templateUrl: './booking.component.html'
})
export class BookingComponent {
  sendDataToMap() {
    const data = {
      bookingId: '12345',
      location: 'Beijing'
    };
    // 把数据转成字符串存储
    sessionStorage.setItem('bookingData', JSON.stringify(data));
    // 跳转到map应用
    window.location.href = '/map/';
  }
}

在map应用的根组件里读取并清理数据（避免残留）：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  ngOnInit() {
    const bookingDataStr = sessionStorage.getItem('bookingData');
    if (bookingDataStr) {
      const bookingData = JSON.parse(bookingDataStr);
      // 处理数据
      console.log('Received data:', bookingData);
      // 读完后删除，防止下次进入map应用时重复读取
      sessionStorage.removeItem('bookingData');
    }
  }
}

注意：如果两个应用是不同子域名，SessionStorage不共享，但你说在同一服务器，应该是同一域名下的不同路径，所以没问题。

方案4：服务器端中转（适合敏感数据） #

如果数据涉及敏感信息（比如用户隐私、支付数据），前端方式都有风险，建议通过服务器端中转：

1. booking应用把数据POST到服务器的一个接口（比如/api/save-booking-data），服务器将数据存储在当前用户的Session里。
2. booking应用跳转到/map/应用。
3. map应用加载时，调用服务器的另一个接口（比如/api/get-booking-data），从Session里获取数据，之后服务器可以清除Session里的这些数据，避免重复获取。

这种方式最安全，但需要后端配合开发接口。

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