Angular动态组件通信：从门户到父组件的数据传递

在Angular中，使用动态组件（如通过cdkPortalOutlet和ComponentPortal实现的门户组件）时，数据传递是一个常见且重要的需求。本文将通过一个详细的实例，探讨如何从动态加载的门户组件向父组件传递数据。

背景介绍

当我们使用cdkPortalOutlet来动态渲染组件时，通常会遇到从子组件（门户组件）向父组件传递数据的需求。由于门户组件是动态创建的，传统的父子组件通信方式（如@Output()）在这里并不适用。因此，我们需要采用其他方法来实现这个目标。

解决方案：事件总线模式

一种有效的解决方案是使用事件总线模式（Event Bus Pattern）。这种模式通过一个共享的服务来传递事件和数据，使得组件之间可以无缝通信。

步骤一：创建共享服务

首先，我们需要创建一个共享服务，这个服务将用于在门户组件和父组件之间传递数据：

import