Question

我正在尝试将Component包含在2个模块（父级和子级）中，但在此过程中会遇到各种错误

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>

我正在Async中加载 ChildModule

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

importing中的declaring或ChildModule没有收到错误：

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

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

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

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
})

Answer 1

为了完整起见，根据Gunter的回答，使用Ext.form.FormPanel：

<强> SharedModule

SharedModule

app.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

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

<强> child.module.ts

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

Answer 2

<强>更新

int i = gridUsuarios.Columns["status"].Index; if (gridUsuarios.Rows[i].Cells[i].Value == "1") { gridUsuarios.Rows[i].Cells[i].Value = "Active"; }else { gridUsuarios.Rows[i].Cells[i].Value = "Inactive"; }仅适用于模块，不适用于组件。如果imports导出共享组件，我怀疑它会有用。改为app.module或SharedModule，并将此模块添加到MyFeatureModule，以便您使用模块导出的元素。

<强>原始

一个组件只能添加imports一个declarations

解决方法为组件创建一个新模块，并将新模块添加到其他两个模块的@NgModule()（您要使用它的位置）。

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

当您创建模块的组件时，在编译时会为其赋予一组规则。拥有一个不属于NgModule的组件是没有意义的，因为编译器无法编译它。让一个组件成为一个以上模块的一部分也很奇怪，因为你说根据你选择哪个模块编译规则是不同的。当你动态加载这样一个组件时，你想要的那组编译规则是不明确的。

由于上述原因，删除每个组件只属于一个模块的想法是不可行的。

Answer 3

创建一个SharedModule。声明并导出SharedComponent。

shared.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedComponent } from './shared';

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

   ]
 })
 export class SharedModule { }

在AppModule和任何其他模块中导入SharedModule。

app.module.ts

  import { SharedModule } from './shared.module';
  @NgModule({
    imports: [
      SharedModule
    ]
  })

Answer 4

您必须在您的提供商中包含共享组件：SharedModule部分。然后从派生模块中，您只需导入SharedModule和Bingo。

    import { PagingInfoComponent } from './paging/paging.component';

   @NgModule({
      providers: [ PagingInfoComponent ],
      declarations: [ ],
      exports: [ ]
    })

   export class SharedModule {}

并且，在您的派生模块中，

import { SharedModule } from '../location/to/shared.module';
@NgModule({
 imports: [SharedModule ]
});

在2个模块之间共享组件

4 个答案: