在基本窗口和弹出窗口Angular 12之间进行通信

Question

当用户试图再次打开相同的弹出窗口时，我需要从基本窗口触发一些事件到弹出窗口，这是一个齿轮图标下拉列表。我可以用什么不同的方法来处理这个用例？我试着使用一个服务，但由于基本窗口和弹出窗口是不同角度的应用程序，它创建了一个不同的服务实例。

import { Injectable } from "@angular/core";
import { Subject } from "rxjs";
@Injectable()
export class ServiceMessage{
subscribers: any = [];
private subject = new Subject<any>();
sub = this.subject.asObservable();
a: any = [];
constructor() {}
nextSub(data: any) {
this.subject.next(data)
}
}

Answer 1

解决方案：

1. 如果您的两个应用程序部署在同一域中，请使用浏览器存储(本地存储或其他存储(来存储信息。在本地存储中设置标志

window.localStorage.setItem("isPopOpen", "true");

从本地存储获取标志

window.localStorage.getItem("isPopOpen");

2. 如果您的应用程序托管在不同的域上，请使用Window.postMessage()进行通信。window.postMessage()方法安全地实现了Window对象之间的跨原点通信；例如，在页面和它生成的弹出窗口之间，或者在页面和嵌入其中的iframe之间

点击此处了解有关window.postMessage()的更多信息https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage