使用另一个模块中的组件

一种很棒的方法是从加载模块NgModuleFactory，您可以通过调用以下命令将模块加载到另一个模块中：

constructor(private loader: NgModuleFactoryLoader, private injector: Injector) {}

loadModule(path: string) {
    this.loader.load(path).then((moduleFactory: NgModuleFactory<any>) => {
        const entryComponent = (<any>moduleFactory.moduleType).entry;
        const moduleRef = moduleFactory.create(this.injector);
        const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);
        this.lazyOutlet.createComponent(compFactory);
    });
}

我从这里得到的。

无论您想在另一个模块中使用什么，只需将其放在export array中即可。像这样-

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

（角度2-角度7）

组件只能在单个模块中声明。为了使用另一个模块中的组件，您需要执行两个简单的任务：

1. 将组件导出到另一个模块中
2. 将另一个模块导入当前模块

第一个模块：

有一个组件（我们称它为“ ImportantCopmonent”），我们想在第二个模块的页面中重复使用。

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

---

第二模块：

通过导入FirstPageModule，重用“ ImportantCopmonent”

@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 { }

您必须export从您的NgModule：

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

这里的主要规则是：

在组件模板的编译过程中适用的选择器由声明该组件的模块以及该模块的导入的导出的可传递关闭确定。

因此，尝试将其导出：

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

我应该出口什么？

导出其他模块中的组件应该能够引用的声明类。这些是您的公开课。如果不导出类，则该类将保持私有状态，仅对该模块中声明的其他组件可见。

创建新模块（无论是否懒惰），任何新模块并在其中声明任何内容的那一刻，该新模块都处于干净状态（如Ward Bell在 https://devchat.tv/adv-in-angular/119中所述） -aia-避免常见的陷阱（在angular2中）

Angular 为每个s 创建传递模块@NgModule。

该模块收集从另一个模块导入的指令（如果导入模块的可传递模块已导出指令）或在当前模块中声明。

当属于模块的angular编译模板时，将X使用X.transitiveModule.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无法ZComponent在其模板中使用，因为不包含的directives数组，因为尚未导入其传递模块包含在数组中。Transitive module YZComponentYModuleZModuleZComponentexportedDirectives

• 在XComponent模板中，我们可以使用ZComponent因为Transitive module X有指令数组，其中包含ZComponent因为 XModule导入模块（YModule）导出模块（ZModule）导出指令ZComponent

• 在AppComponent模板中，我们不能使用XComponent，因为AppModule进口XModule而XModule没有出口XComponent。

也可以看看

• 为什么延迟加载的模块必须导入commonModule？角度2

• Angular模块常见问题解答

• NgModule中的声明，提供程序和导入之间有什么区别