如何以角度将组件从一个模块导出和导入到它的子模块

Posted 2023-02-22

【中文标题】如何以角度将组件从一个模块导出和导入到它的子模块

【英文标题】：How to export and import component from one module to it's children module in angular

【发布时间】：2019-03-27 11:19:46

【问题描述】：

我正在使用 Angular 5。

我有一个名为PostLoginPartnersModule 的模块，其中我有一个名为SearchUsersComponent 的组件和另一个模块ListingUsersModule。我想用 SearchUsersComponent 存在于ListingUsersModule 中的组件中。

我收到一个错误：

core.js:1448 错误错误：未捕获（承诺中）：错误：类型 SearchUsersComponent 是 2 个模块声明的一部分：PostLoginPartnersModule 和 ListingUsersModule！请考虑将 SearchUsersComponent 移至导入 PostLoginPartnersModule 和 CareGroupModule 的更高模块。您还可以创建一个新的 NgModule，它导出并包含 SearchUsersComponent，然后将该 NgModule 导入 PostLoginPartnersModule 和 ListingUsersModule。 错误：类型 SearchPatientComponent 是 2 个模块声明的一部分：PostLoginPartnersModule 和 ListingUsersModule！请考虑将 SearchUsersComponent 移至导入 PostLoginPartnersModule 和 ListingUsersModule 的更高模块。您还可以创建一个新的 NgModule，它导出并包含 SearchPatientComponent，然后将该 NgModule 导入 PostLoginPartnersModule 和 ListingUsersModule。

【参考方案1】：

仅在单个模块中声明 Component。将声明这个Component 的模块导入到使用它的模块中。所以在这种特殊情况下ListingUsersModule 应该导入PostLoginPartnersModule。 ListingUsersModule 不应重新声明 SearchUsersComponent。

从设计的角度来看，将PostLoginPartnersModule 导入ListingUsersModule 可能没有意义。在这种情况下，创建第三个模块来声明和导出 SearchUsersComponent（和其他共享组件）并将该模块导入其他两个模块中。

我建议不要在另一个模块的目录中包含包含模块的目录。这可能会令人困惑。

【讨论】：

记得在你的 NgModule 的 exports 声明中添加你的组件！

@DavidWalschots 感谢您的帮助。没有意识到这一点。在 PostLoginPartnersModule 中创建第三个模块有效。但我无法在 searchUsers 组件中使用应用程序的共享模块（如 FormsModule、ReactiveFormsModule）。 SearchUsersComponent 是 PostLoginPartnersModule 的一部分， PostLoginPartnersModule 已导入共享模块。为了解决这个问题，我还在 PostLoginPartnersModule 新创建的子模块中导入了 sharedModules。我不明白为什么需要这样做。感谢您的时间和知识:)

@Simer 在一个模块中导入的任何内容都不会自动导入到另一个模块中。因此，您可能需要考虑创建一个 shared feature module 来导入和导出 FormsModule 等。然后只需将 SharedModule 导入到您的其他模块中。

@DavidWalschots 我在应用程序中有 sharedModule。现在，当我在 PostLoginPartnersModule 中创建另一个模块 sharedComponentsModule（共享 searchUsers 组件）时，我在 sharedComponentsModule 中导入 sharedModules 以便在 searchUsers 组件中使用共享模块，而 searchUsers 组件本身就是 PostLoginPartnersModule 的一部分。我知道我不够清楚，只是想陈述我的问题。我已经更新了 stackblitz 来描述这一点。尽管演示中没有任何功能，但创建了 sharedModule 和 subsharedModule 来解释我的疑问。非常感谢！

@Simer SO 不是调试服务。通过更改您的 StackBlitz，您现在有效地使您的原始问题难以回答/遵循。请不要那样做。如果您有更多问题，请打开一个新问题。请务必关注Angular style guide 并遵循我的建议，不要在模块下方设置模块。还要确保将所有组件放在模块目录下或目录下。不在另一个父/兄弟目录中。