Angular: 如何在不同模块中的不同组件之间共享一个组件，反之亦然

Question

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

我有四个模块。模块 A 和组件 A，模块 B 和组件 B，模块 C 和组件 C，模块 D 和组件 D。模块 B、C 和 D 各自导入模块 A 以访问组件 A。但是有一个问题，组件 A需要使用它的各个组件。例如组件A被组件B使用时需要组件B.

有没有办法让它在不让模块 B、C 和 D 各自拥有自己的组件 A 副本的情况下工作？

Answer 1

这是一个普遍的要求。这里稍微解释一下。

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

现在，如果 组件 A 在模块 A 中，组件 B 在模块 B 中并且两者相互需要，那么您导入 模块A在模块B中，模块B在模块A[=49=中]，那么你就陷入了循环引用陷阱。

要解决此问题，您必须引入一个新模块，并在此新模块中声明所有此类组件，并让这个新模块导入到需要组件的模块中。

假设我的这个新模块名称是 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 { }

谢谢。