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内容,但它将显示为空白.它也没有给出任何错误.不确定我做错了什么.

注意:如果我直接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 { }

模块不继承组件在其他模块中声明.所以,当您导入CommonModule在AppModule它并没有任何效果.

您可以在这里阅读更多信息.