Question

我有一个有多个视图的应用，例如一个是电子表格和另一个是双面板视图，用于两个视图导航，搜索和过滤器很常见。所以我添加了一个通用模块并将该模块导入主模块＆amp;现在尝试在电子表格组件中使用通用模块组件。以下是我的代码，它将提供正确的图片：

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

这里有两件事需要做：

首先，导出TopNavigation＆amp; CommonModule中的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时，它没有任何效果。

您可以阅读here了解详情。

Angular 2多个模块

1 个答案: