通过iframe在Angular 6应用程序之间进行发布者-订阅者模式通信

我正在研究一个解决方案，其中一个角度应用程序在另一个角度应用程序的iframe中使用。子应用程序需要一些参数才能将正确的信息显示到父应用程序中。我在网上读了很多解决方案，一个好的解决方案是应用设计模式publisher/subscriber

很多例子都是在同一个应用程序中的组件之间，我想知道使用rxjs对象的同一个解决方案是否正确（如图所示）

我的疑问是：我如何将子应用程序订阅给父应用程序（外部发布者）

我正在考虑一个RESTAPI，由父级公开，用于注册和注销订阅服务器，但我不确定

---

有这种情况的经验吗？提前感谢

我看到这样做的唯一方法是通过

CustomEvent

对象

要发送通知的页面使用以下方法执行此操作：

<script>
    window.onload = function () {
        /* The parent window hosts the Angular application */
        const parent = window.parent;
        /* Send an event to the message handler */
        const event = new CustomEvent('example-unique-string', { field1: 'value', field2: 'value' });
        parent.dispatchEvent(event);
    };
</script>

当然，你可以在两个方向上做

---

如果可以的话，我当然会尽量避免使用

iframe

，但您会知道什么适合您的情况。

您可以使用window.postmessage方法在iframe和父应用程序之间发布消息。您还可以将数据与事件一起发布。

---

您可以参考上面的链接，在iframe中发布消息。

感谢您的快速回复Cobus，但我们需要iframe将我们的应用程序包含在一个门户中，该门户收集客户端的所有子应用程序。我们看到的唯一解决方案是iframe。你看到其他的解决方案了吗？如果没有更多的信息，很难说，但是有些情况下我们无法逃避它们。另一个例子是静默身份验证令牌刷新场景。如果这个解决方案对你有效，请记住接受它。我会很快尝试并返回给你

window.addEventListener('example-unique-string', () => { /* some function */ }, false);