使用相同组件的许多模块会导致错误-Angular 2 [英] Many Modules using the same component causes error - Angular 2

问题描述

我有一个共享的组件GoComponent，我想在两个模块中使用它们:FindPageModule和AddPageModule.

I have a shared component called GoComponent that I want to use in 2 modules: FindPageModule and AddPageModule.

当我在"FindPageModule"的声明和"AddPageModule"的声明中添加它时，出现错误:

When I add it in the declarations of "FindPageModule" and in my "AddPageModule" I get an error:

发现:21错误:(SystemJS)类型GoComponent是声明的一部分 2个模块:FindPageModule和AddPageModule！请考虑搬家 将GoComponent导入导入FindPageModule和 AddPageModule.您还可以创建一个新的NgModule，以导出并 包括GoComponent，然后在FindPageModule中导入该NgModule并 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":

So I take it out of them both and add it in AppModule declarations, which does import FindPageModule and AddPageModule, and I get an error in a component called "FindFormComponent" which is in the declarations of FindPageModule and uses "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?

How do I let components such as FindFormComponent that are declared in FindPageModule use GoComponent and also let components declared by AddPageModule use GoComponent?

推荐答案

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

Yes, components can be declared only in one module, and nor are their access inherited in any way, meaning declaring it in the main app module will not give you access to it in any other module.

如果您有一个被其他模块使用的组件，通常，他们要采取的方法是将其放在共享模块中

If you have a component that is used by other modules, generally they way to go is to put it in a shared module

在共享模块中包含组件:

Include component in a shared module:

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

如何在其他地方使用共享模块:

How to use the shared module elsewhere:

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

另请参见

• Angular2如何清理AppModule

这篇关于使用相同组件的许多模块会导致错误-Angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！