[解決済み] Angular 2 複数モジュール

質問

私は、1つはスプレッドシートのような複数のビューを持っているアプリを持っています; 他の2つのパネルビューは、両方のビューのためのナビゲーション、検索、およびフィルタが共通になります。そこで、共通モジュールを追加し、そのモジュールをメインモジュールにインポートしました。以下は、適切な画像を提供する私のコードです。

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

今、この2つのモジュールを1つのメインモジュールにインポートしているところです。

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

どうすればいいですか？

ここでは、2つのことを行う必要があります。

まず、エクスポートします。 TopNavigation &です。 Search コンポーネントを CommonModule から取得し、他のモジュールで使用できるようにします。

// 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 を指定しても、何の効果もありません。

を読むことができます。 こちら をご覧ください。