在2个模块之间共享组件 [英] Share Component between 2 modules

问题描述

我试图在两个模块(父级和子级)中包含一个Component，但在此过程中遇到各种错误

I'm trying to include a Component in 2 modules (parent and child) but getting various errors in the process

app.module.ts

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

child.module.ts

@NgModule({
    imports: [SharedComponent], //Unexpected directive imported by module
})  

app.html

<div class="container">
    <shared-selector></shared-selector>
    <child-selector></child-selector>
</div>

child.html

<div>
    content
    <shared-selector></shared-selector>
</div>

我正在异步事件中加载 ChildModule

I'm loading the ChildModule in Async matter

loadChildren: 'app/child.module#ChildModule',

当ChildModule中没有importing或declaring时，我得到了错误:

When not importing or declaring in the ChildModule I'm getting the error:

template parse error: shared-selector is not a known element

****** 更新 *******

****** UPDATE *******

创建FeatureModule时，为了正常工作，SharedModule应该导出组件...更新后的代码...

when Creating FeatureModule, in order to work the SharedModule should export the Components...updateed code...

SharedModule

@NgModule({
    imports: [
        CommonModule
     ],
    declarations: [
         SharedComponent
    ],
    exports: [
        SharedComponent
    ]
})

export class SharedModule {}

app.module.ts

@NgModule({
    imports: [ChildModule, SharedModule],...
})    

child.module.ts

@NgModule({
    imports: [SharedModule], //Unexpected directive imported by module
})  

推荐答案

更新

imports仅适用于模块，不适用于组件. 我怀疑app.module是否可以导出共享组件.改成SharedModule或MyFeatureModule，然后将此模块添加到imports中要使用该模块导出的元素的地方.

imports is only for modules, not components. I doubt it will work out if the app.module exports the shared component. Make it a SharedModule or MyFeatureModule instead and add this module to imports where you want to use the elements the module exports.

原始

只能添加一个组件中的一个declarations

One component can only be added declarations of exactly one @NgModule()

作为解决方法，为该组件创建一个新模块，并将新模块添加到其他两个模块的imports: [...]中(要使用它的位置).

As workaround create a new module for the component and add the new module to imports: [...] of the other two modules (where you want to use it).

另请参见 https://github.com/angular/angular/issues/11481#issuecomment-246186173

当您将模块的组件作为模块的一部分时，您在编译模块时会赋予一组规则.拥有一个不属于NgModule的组件是没有意义的，因为编译器无法对其进行编译.如果说一个组件是多个模块的一部分，那也是很奇怪的，因为您说的是，取决于您选择哪个模块，编译规则是不同的.而且，当您动态加载这样的组件时，您想要哪组编译规则将是模棱两可的.

When you make a component part of a module you impart on it a set of rules when it is compiled. Having a component without belonging to a NgModule is meaningless as the compiler can't compile it. Having a component be part of more then one module is also weird as you are saying that depending which module you chose the rules for compiling are different. And when you dynamically load such a component it would be ambiguous which set of compilation rules you wanted.

出于上述原因，删除每个组件完全属于一个模块的想法是不可行的.

The idea of removing that each component belongs to exactly one module is a no-go for the reasons stated above.

这篇关于在2个模块之间共享组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！