angular - 使用相同组件的许多模块会导致错误 - Angular 2

Question

我有一个名为 GoComponent 的共享组件，我想在 2 个模块中使用它:FindPageModule 和 AddPageModule。

当我将它添加到“FindPageModule”和我的“AddPageModule”的声明中时，出现错误:

find:21 Error: (SystemJS) Type GoComponent is part of the declarations of 2 modules: FindPageModule and AddPageModule! Please consider moving GoComponent to a higher module that imports FindPageModule and AddPageModule. You can also create a new NgModule that exports and includes GoComponent then import that NgModule in FindPageModule and AddPageModule.

所以我从它们两个中取出它并将其添加到 AppModule 声明中，它确实导入了 FindPageModule 和 AddPageModule，并且我在名为“FindFormComponent”的组件中遇到错误，该组件位于 FindPageModule 的声明中并使用“GoComponent”:

zone.js:355 Unhandled Promise rejection: Template parse errors:
'go' is not a known element:
1. If 'go' is an Angular component, then verify that it is part of this module.
2. If 'go' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" style="height:64px;">
            <div style="position: relative; display: inline-block; width: 100%;">
                [ERROR ->]<go></go>
            </div>
        </div>
"): FindFormComponent@101:4 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
'go' is not a known element:
1. If 'go' is an Angular component, then verify that it is part of this module.
2. If 'go' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" style="height:64px;">
            <div style="position: relative; display: inline-block; width: 100%;">
                [ERROR ->]<go></go>
            </div>
        </div>
"): FindFormComponent@101:4

如何让FindPageModule声明的FindFormComponent等组件使用GoComponent，同时让AddPageModule声明的组件使用GoComponent？

Answer 1

是的，组件只能在一个模块中声明，它们的访问权限也不会以任何方式继承，这意味着在主应用模块中声明它不会让您在任何其他模块中访问它。

如果你有一个被其他模块使用的组件，通常他们的做法是把它放在一个共享模块中

在共享模块中包含组件:

@NgModule({
  declarations: [ SharedComponent ],
  exports: [ SharedComponent ]
})
export class SharedModule {}

如何在别处使用共享模块:

@NgModule({
  imports: [ SharedModule ]
})
class ModuleWithComponentThatUsesSharedComponent {}

另见

• Angular2 How to clean up the AppModule