(Angular 2 - Angular 7)

组件只能在单个模块中声明。 为了使用来自另一个模块的组件，你需要做两个简单的任务:

导出另一个模块中的组件 导入另一个模块到当前模块中

模块1:

有一个组件(让我们叫它:“ImportantComponent”)，我们想在第2模块的页面中重用。

@NgModule({
declarations: [
    FirstPage,
    ImportantComponent // <-- Enable using the component html tag in current module
],
imports: [
  IonicPageModule.forChild(NotImportantPage),
  TranslateModule.forChild(),
],
exports: [
    FirstPage,
    ImportantComponent // <--- Enable using the component in other modules
  ]
})
export class FirstPageModule { }

模块2:

通过导入FirstPageModule来重用ImportantComponent

@NgModule({
declarations: [
    SecondPage,
    Example2ndComponent,
    Example3rdComponent
],
imports: [
  IonicPageModule.forChild(SecondPage),
  TranslateModule.forChild(),
  FirstPageModule // <--- this Imports the source module, with its exports
], 
exports: [
    SecondPage,
]
})
export class SecondPageModule { }

无论你想从另一个模块中使用什么，只要把它放在导出数组中。 像这样,

 @NgModule({
  declarations: [TaskCardComponent],
  exports: [TaskCardComponent],
  imports: [MdCardModule]
})

你必须从你的NgModule中导出它:

@NgModule({
  declarations: [TaskCardComponent],
  exports: [TaskCardComponent],
  imports: [MdCardModule],
  providers: []
})
export class TaskModule{}

这里的主要规则是:

在编译组件模板期间适用的选择器由声明该组件的模块和该模块导入的导出的传递闭包决定。

所以，试着导出它:

@NgModule({
  declarations: [TaskCardComponent],
  imports: [MdCardModule],
  exports: [TaskCardComponent] // <== export the component you want to use in another module
})
export class TaskModule{}

我应该导出什么?

导出其他模块中的组件应该是的可声明类 能够在他们的模板中引用。这些是你的公共类。 如果不导出类，它将保持私有，仅对其他类可见 在此模块中声明的组件。

在你创建一个新模块的那一刻，不管是不是惰性的，任何一个新模块，你在它里面声明了任何东西，这个新模块都有一个干净的状态(正如Ward Bell在https://devchat.tv/adv-in-angular/119-aia-avoiding-common-pitfalls-in-angular2中说的那样)

Angular为每个@ ngmodule创建了可传递的模块。

该模块收集从其他模块导入的指令(如果导入模块的可传递模块有导出指令)或在当前模块中声明的指令。

当angular编译属于模块X的模板时，它会使用在X. transitivmodule .directives中收集到的那些指令。

compiledTemplate = new CompiledTemplate(
    false, compMeta.type, compMeta, ngModule, ngModule.transitiveModule.directives);

https://github.com/angular/angular/blob/4.2.x/packages/compiler/src/jit/compiler.ts#L250-L251

按照上图这样做

YComponent can't use ZComponent in its template because directives array of Transitive module Y doesn't contain ZComponent because YModule has not imported ZModule whose transitive module contains ZComponent in exportedDirectives array. Within XComponent template we can use ZComponent because Transitive module X has directives array that contains ZComponent because XModule imports module (YModule) that exports module (ZModule) that exports directive ZComponent Within AppComponent template we can't use XComponent because AppModule imports XModule but XModule doesn't exports XComponent.

另请参阅

为什么惰性加载模块必须导入commonModule?角2 Angular模块常见问题 在NgModule中，声明、提供者和导入之间有什么区别?

解决了如何在另一个模块中使用一个模块中声明的组件。

基于Royi Namir的解释(非常感谢)。 当使用延迟加载时，在任何其他模块中重用一个在模块中声明的组件，这是一个缺失的部分。

第1步:导出包含它的模块中的组件:

@NgModule({
  declarations: [TaskCardComponent],
  imports: [MdCardModule],
  exports: [TaskCardComponent] <== this line
})
export class TaskModule{}

第二步:在你想要使用TaskCardComponent的模块中:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MdCardModule } from '@angular2-material/card';

@NgModule({
  imports: [
   CommonModule,
   MdCardModule
   ],
  providers: [],
  exports:[ MdCardModule ] <== this line
})
export class TaskModule{}

第二个模块导入第一个模块，第一个模块导入并导出组件。

当我们导入第二个模块中的模块时，我们需要再次导出它。现在我们可以在第二个模块中使用第一个组件。

注意，为了创建所谓的“特性模块”，你需要在其中导入CommonModule。所以，你的模块初始化代码看起来是这样的:

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

import { TaskCardComponent } from './task-card/task-card.component';
import { MdCardModule } from '@angular2-material/card';

@NgModule({
  imports: [
    CommonModule,
    MdCardModule 
  ],
  declarations: [
    TaskCardComponent
  ],
  exports: [
    TaskCardComponent
  ]
})
export class TaskModule { }

更多信息请访问:https://angular.io/guide/ngmodule#create-the-feature-module