Question

我正在将一个大模块拆分为几个较小的模块，并遇到以下问题： 1.搜索组件用于多个组件之间。现在，它在app.module.ts中声明。以后它将被移到shared.module.ts。 2.包装器组件使用搜索组件。当我创建简单的wrapper.module.ts时，出现一个错误，即应用程序搜索不是已知元素。如果我在wrapper.module.ts中声明它，则会收到一个错误，即搜索组件在2个不同的模块中声明，这很有意义。为什么搜索组件在app.module.ts中声明，但对于具有单独模块的组件不可见？我无法声明搜索补偿。在wrapper.module.ts中，因为稍后其他组件将使用它。 CLI重新启动没有帮助。 “ app-search”是正确的选择器名称。

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

将搜索组件移至共享模块（或共享功能模块）时，该问题将得到解决。

您不能像提供程序那样使用它，因为在根目录中提供它可以允许模块中及其下方的所有单元访问它，因为它可能需要所在模块中的其他组件/等。如果能够从父模块访问组件可能，当模块延迟加载时，事情可能会变得很奇怪。

另一种方法是为共享组件或一组功能创建模块（请看Angular Material团队如何处理此模块）。创建可以独立运行的特定模块，而不是通用的“共享”模块，可以让您更加具体地了解所需的可用内容，仅导出模块需要公开的组件（并非所有组件都需要导出）。

在Angular 6应用中共享具有多个模块的一个组件

2 个答案: