角6的应用程序，具有多个模块内共享一个部件

Question

我分裂一个大的模块，以几个较小的模块，并有此问题：1.搜索组件的多个组件之间使用。现在它在app.module.ts被声明。后来人们将被移动到shared.module.ts。 2.包装组件使用搜索组件。当我创建简单的wrapper.module.ts我得到的应用程序的搜索是不知道元素的错误。如果我在wrapper.module.ts声明它，我会得到搜索组件在2个不同的模块中声明一个错误，这是有道理的。为什么搜索组件在app.module.ts宣告但尚未由具有一个单独的模块组件可见？我不能宣布搜索补偿。里面wrapper.module.ts因为它会被其他组件以后使用。 CLI重启没有帮助。 “应用程序搜索”是一个正确的选择名称。

app.module.ts：

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { WrapperModule } from '../wrapper/wrapper.module';
import { SearchComponent } from '../search/search.component';

@NgModule({
 imports: [
  CommonModule,
  WrapperModule
 ],
 declarations: [
  AppComponent,
  SearchComponent
 ]
})
export class AppModule {}

包装模块：

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { WrapperComponent } from './wrapper.component';

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

Wrapper.component.html

<app-search></app-search>

搜索component.ts

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss'],
})
... 

Answer 1

如果您想使用多个模块的组件，你需要创建一个“共享”模块，并添加该组件的共享模块的exports。然后你添加共享模块到你的其他模块imports

每个模块是它自己的生态系统，有自己的进口。一旦你打开WrapperComponent到WrapperModule它没有访问了的AppModule进口，都必须有它自己的。

Answer 2

当您移动搜索组件到共享模块（或共享的功能模块）的问题就解决了。

其中根提供它允许和模块下方各单位要访问它，因为它可能需要其他组件的/ etc从它在模块不能使用它像一个供应商。如果能够从父模块访问组件是可能的，当模块延迟加载事情会变得怪异。

另一种方法是使一个模块只是一个共享的组件或功能集（看看在Angular Material团队如何处理这一点）。创建自己的工作，而不是一个通用的“共享”模块，可以让你更具体和你想要什么可用的地方，仅导出组件模块需要公开（不是所有的组件需要出口）特定模块。