angular - 如何从一个 Angular 库到另一个 Angular 库进行通信？

Question

我有这个 angular 应用程序，它基本上使用了库的概念。

我有 2 个名为 的库Lib1 和 lib2 根据他们所服务的微服务分组。

现在我将这些库导入主应用程序，即 应用1 事情一直到现在。

现在，Lib1 有一个组件 UploadComponent 负责上传所有类型的媒体文件 video、image、Docs 等，在 App1 中独立使用时，通过使用组件选择器或通过路由加载，可以正常工作。

Lib2 有一个组件 CreateComponent 需要上传功能，所以我导入 UploadComponent 并在模式窗口中调用它。但是在上传完成后，该组件会发出一些消息，但我无法捕获该消息，因为 Createcomponent 和 UploadComponent 位于不同的库中。

有谁知道如何处理这种情况？

Answer 1

将有两种不同的方式，您可以使用它们通过两个不同的微型应用程序或称为 Angular 库进行通信。
请按照以下步骤操作:-

假设您有两个图书馆项目在一个 Angular 应用程序 [用户和员工] 下工作

在staff.module.ts 中，您需要在imports 数组中导入UsersModule。

然后您可以在人员组件中使用 HTML，您可以在其中将数据传递给用户应用程序，如下所示

<users [listingFilterData]="filterObject"></users>

在用户组件 ts 文件中，您可以使用 @Input 指令获取“listingFilterData”对象数据并处理用户组件中的数据，结果将在人员组件下更新。

第二种方法是从一个组件发出事件，该事件可以监听另一个组件或库模块。

从一个组件调度事件:-

 document.dispatchEvent(
  new CustomEvent(name, { detail: body })
);

将事件监听到另一个组件中

  document.addEventListener(name, handler);

希望有帮助。