Angular 2多模块

Question

我有一个应用程序有多个视图，如一个是电子表格和其他是两个面板视图，对于两个视图导航，搜索和过滤器将是常见的。因此，我添加了一个公共模块，并将该模块导入到主模块中&现在尝试在电子表格组件中使用公共模块组件。下面是我的代码，它将给出正确的图片：

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

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

注意:如果我在spreadsheet.module.ts中直接声明TopNavigation，它就能正常工作。但是由于导航和搜索很常见，所以我不想在每个应该只在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了解更多信息。