如何从另一个可重用组件和容器组件访问可重用组件答案

【问题标题】：How to access a reusable component from one another reusable component and a container component如何从另一个可重用组件和容器组件访问可重用组件
【发布时间】：2021-07-30 13:43:04
【问题描述】：

在我们的 Angular 8 项目中，我们有一个用于用户注册的容器组件 (user.registartion)。此外，我们还有一个用于更新用户信息的可重用组件（user.component）。两个组件都必须显示一个“用户策略”弹出窗口，这也是一个可重用组件（policy.component）。下图是我的项目结构。

但我无法在两个组件中显示策略弹出窗口。它在用户注册页面上显示以下错误。

如何从用户注册和用户信息组件访问“策略”组件？

【问题讨论】：

用户注册模块中是否导入了共享模块？
这能回答你的问题吗？ How to put a component inside another component in Angular2?
没有代码很难回答你的问题。否则您根本不知道如何导入组件，因此下面的答案或官方 Angular 文档可能会对您有所帮助。

标签： javascript angular modal-dialog angular8 ng-modules

【解决方案1】：

您需要创建一个共享模块以在多个模块（以及您想要共享的所有内容，如管道、指令等）之间共享组件。 docs中有一个示例如何使用：

// ...

@NgModule({
 imports:      [ CommonModule ],
 declarations: [ ... your components etc... ],
 exports:      [ ... your components etc... ]
})
export class SharedModule { }

记得将CommonModule 导入共享模块中的导入数组，然后导出组件。然后 import 共享模块到您的其他模块。

【讨论】：

通过创建一个共享模块，它最终会变得太大，即使另一个模块只使用共享模块中的一个组件，我们仍然导入整个共享模块我面临这个问题，我们可以将共享模块分解为更小的模块，例如用于自动完成/搜索框的单独模块，用于输入/文本区域的单独模块，用于复选框/单选按钮的单独模块等，因为我们有自己的自定义组件？是好习惯还是坏习惯？拥有这些小得多的模块？

【解决方案2】：

您需要在 UserRegistrationModule 上导入 SharedModule... 类似这样：

@NgModule({
  // ...
  imports: [
    CommonModule,
    SharedModukle, // <--- 
  ],
  // ...
})
export class UserRegistrationModule {}

【讨论】：