4

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

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

现在我将这些库导入到主应用程序，即App1中，直到现在。

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

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

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

4

1 回答 1

1

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

  1. 假设您有两个库项目在一个 Angular 应用程序下工作 [用户和员工]
  2. 在 staff.module.ts 中，您需要在 imports 数组中导入 UsersModule。
  3. 然后您可以在人员组件 HTML 中使用，您可以在其中将数据传递给用户应用程序，如下所示
  4. <users [listingFilterData]="filterObject"></users>
  5. 在用户组件 ts 文件中，您可以使用 @Input 指令获取“listingFilterData”对象数据并处理用户组件中的数据，结果将在人员组件下更新。

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

从一个组件调度事件：-

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

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

  document.addEventListener(name, handler);

希望有帮助。

于 2020-05-13T09:31:22.863 回答