时间戳

首页 > 解决方案 > Angular：如何在不同模块中的不同组件之间共享组件，反之亦然

angular - Angular：如何在不同模块中的不同组件之间共享组件，反之亦然

问题描述

如何在不同模块中的不同组件之间共享一个组件 将不同模块中的组件与共享组件共享。

我有四个模块。模块 A 与组件 A，模块 B 与组件 B，模块 C 与组件 C，模块 D 与组件 D。模块 B、C 和 D 分别导入模块 A 以访问组件 A。但是有一个问题，组件 A需要使用它的相应组件。例如，组件 A 在被组件 B 使用时需要组件 B。

有没有办法让它工作而不使模块 B、C 和 D 每个都有自己的组件 A 的副本？

标签： angularmoduleangular-componentsangular-module

解决方案

这是一个共同的要求。这里让我稍微解释一下。

Angular 允许在一个且仅一个模块中声明一个组件。如果另一个模块需要该组件，则必须将该模块导入需要该组件的模块的导入数组中。

现在，如果组件 A在模块 A 中，组件 B在模块 B 中并且两者都需要彼此，并且您在模块B中导入模块 A ，在模块A 中导入模块 B ，那么您将陷入循环引用陷阱。

为了解决这个问题，你必须引入一个新模块，并在这个新模块中声明所有这些组件，并让这个新模块在需要这些组件的模块中导入。

假设我的这个新模块名称是LoaderSharedModule，它看起来像这样

@NgModule({
  imports: [
  ],
  declarations: [Component1, Component2, Component3],
  exports: [Component1, Component2, Component3]
})
export class LoaderSharedModule { }

模块将导入此模块以开始使用 Component1,2,3.. 像这样

@NgModule({
  imports: [
    LoaderSharedModule
  ],
})
export class Module1 { }

@NgModule({
  imports: [
    LoaderSharedModule
  ],
})
export class Module2 { }

@NgModule({
  imports: [
    LoaderSharedModule
  ],
})
export class Module3 { }

谢谢。

推荐阅读