Angular 2 多模块

Question

我有一个有多个 View 的应用程序，一个是电子表格，另一个是双面板 View ，对于这两个 View ，导航、搜索和过滤器都很常见。所以我添加了一个公共(public)模块并将该模块导入到主模块&现在尝试在电子表格组件中使用公共(public)模块组件。下面是我的代码，可以给出正确的图片:

// Spreadsheet module - spreadsheet.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { Spreadsheet } from './components/spreadsheet.component';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ Spreadsheet ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class SpreadsheetModule { }

// Common module - common.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { TopNavigation } from './components/header.component';
import { Search } from './components/search.component';
import { AccountInfo } from './services/accountInfo';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ TopNavigation, Search ],
  providers: [ AccountInfo ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class CommonModule {}

现在我将这两个模块都导入到一个主模块中:

// App module - app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CommonModule } from './common/common.module';
import { SpreadsheetModule } from './spreadsheet/spreadsheet.module';

@NgModule({
  imports: [ BrowserModule, CommonModule, SpreadsheetModule ],
  declarations: [ AppComponent ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

所以在我的电子表格组件中，我尝试使用标题的 ( TopNavigation ) 模板，如 <top-nav></top-nav>所以这应该显示 header.html 内容但它是空白的。它也没有给出任何错误。不确定我做错了什么。

注意:如果我直接声明TopNavigation在spreadsheet.module.ts它工作正常。但是由于导航和搜索很常见，我不想在每个应该只在 app.module.ts 中的模块中声明它

Answer 1

这里需要做两件事:

首先，从 CommonModule 导出 TopNavigation 和 Search 组件，以便它们可以在其他模块中使用:

// Common module - common.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { TopNavigation } from './components/header.component';
import { Search } from './components/search.component';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ TopNavigation, Search ],
  exports: [ TopNavigation, Search ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class CommonModule {}

其次，CommonModule 应该由实际使用它的模块导入。在您的情况下，SpreadSheet 模块应导入 CommonModule

// Spreadsheet module - spreadsheet.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { Spreadsheet } from './components/spreadsheet.component';
import { CommonModule } from './common/common.module';

@NgModule({
  imports: [ BrowserModule, CommonModule],
  declarations: [ Spreadsheet ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class SpreadsheetModule { }

模块不继承组件是在其他模块中声明的。因此，当您在 AppModule 中导入 CommonModule 时，它没有任何效果。

您可以阅读 here了解更多信息。