角2の複数のモジュール

Question

私はスプレッドシート&のような複数のビューを持つアプリケーションを持っています。他の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 {} 

は、今私はある一つのメインモジュールにこのモジュールの両方をインポートしています：

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

だから私のスプレッドシートの構成要素で、私がしようとしています<top-nav></top-nav>のようなヘッダー（TopNavigation）テンプレートを使用してください。これによりheader.htmlのコンテンツが表示されるはずですが、空白になるはずです。それは何のエラーも与えていない。私が間違っていることを確認していない。

注：私が直接TopNavigationをspreadsheet.module.tsに宣言すると、正常に動作します。から

まず、輸出TopNavigation & Searchコンポーネント：ナビゲーションと検索が共通しているので、しかし、私は唯一のapp.module.ts

Answer 1

2つのことがここで行われる必要があるにしてくださいすべての単一のモジュールでそれを宣言する必要はありません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 { } 

モジュールをインポートする必要があります。したがって、AppModuleにCommonModuleをインポートしても効果はありません。

詳しくはhereをご覧ください。