基础窗口和弹出窗口之间的通信 Angular 12

发布于 2025-01-18 15:11:22 字数 471 浏览 2 评论 0原文

当用户尝试再次打开同一个弹出窗口（这是一个齿轮图标下拉菜单）时，我需要触发从基本窗口到弹出窗口的一些事件。我可以通过哪些不同的方式来处理这个用例？我尝试使用服务，但由于基本窗口和弹出窗口是不同的角度应用程序，因此它创建了该服务的不同实例。

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)
  }
}

原文

I need to trigger some event from the base window to a popup window when a user tries to open the same popup window again, which is a gear icon dropdown. What are the different ways I can approach this use case? I tried using a service but since the base window and popup window are different angular applications, it's creating a different instance of the service.

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)
  }
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧伤慢歌 2025-01-25 15:11:22

解决方案：

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

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

从本地存储获取标志

window.localStorage.getItem("isPopOpen");

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

有关 window.postMessage() 的更多信息，请参见此处 https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Solutions:

If your two applications are deployed in the same domain, use browser storage(local storage or others) to store the information.
Set a flag in local storage

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

Get the flag from local storage

window.localStorage.getItem("isPopOpen");

If your applications are hosted on different domains, use Window.postMessage() to communicate. The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.

More on window.postMessage() here https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

回复收藏 0 原文

~没有更多了~