Angular 2 mehrere Module

Question

Ich habe eine App, die mehrere Ansichten wie eine Tabellenkalkulation hat & andere ist die Zwei-Panel-Ansicht, für beide Ansichten Navigation, Suche & Filter werden gemeinsam sein. Also fügte ich ein gemeinsames Modul hinzu und importierte dieses Modul in das Hauptmodul &, das jetzt versucht, allgemeine Modulkomponenten in der Tabellenkalkulationskomponente zu verwenden. Nun unten ist mein Code, der das richtige Bild geben:

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

Jetzt bin ich den Import sowohl um dieses Modul zu einem Hauptmodul, das ist:

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

Also in meiner Tabelle der Komponente, Ich versuche, Verwenden Sie Headers (TopNavigation) Vorlage wie <top-nav></top-nav> so sollte dies Header.html Inhalt angezeigt, aber es als leer. Es gibt auch keinen Fehler. Nicht sicher, was ich falsch mache.

Hinweis: Wenn ich TopNavigation in spreadsheet.module.ts direkt deklariere, funktioniert es gut. Aber da die Navigation und Suche gemeinsam ist ich will es nicht in jedem einzelnen Module erklären, dass nur in sein sollte app.module.ts

Answer 1

Zwei Dinge müssen hier zu tun:

Zuerst Export TopNavigation & Search Komponenten aus dem CommonModule so können sie in anderen Modulen verwendet werden:

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

Zweitens, die CommonModule sollte durch das Modul importiert werden, die es tatsächlich nutzt. In Ihrem Fall sollte das SpreadSheet Modul importieren 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 { } 

Module erben keine Komponenten in anderen Modulen deklariert sind. Wenn Sie also CommonModule in AppModule importieren, hat das keinen Effekt.

Sie können here für weitere Informationen lesen.