कोणीय 2 एकाधिक मॉड्यूल

Question

मेरे पास एक ऐप है जिसमें एक जैसे कई दृश्य हैं स्प्रेडशीट & अन्य दृश्य दृश्य नेविगेशन के लिए दो पैनल दृश्य है, & फ़िल्टर खोजना आम होगा। इसलिए मैंने एक सामान्य मॉड्यूल जोड़ा और मॉड्यूल को मुख्य मॉड्यूल & पर आयात किया, अब स्प्रेडशीट घटक में सामान्य मॉड्यूल घटकों का उपयोग करने का प्रयास कर रहा है।

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

अपने स्प्रेडशीट के घटक में

तो, मैं कोशिश कर रहा हूँ:

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

अब मैं एक मुख्य मॉड्यूल जो है करने के लिए दोनों इस मॉड्यूल का आयात कर रहा हूँ: ठीक नीचे मेरी कोड है कि उचित तस्वीर पेश करेंगे है <top-nav></top-nav> जैसे हेडर के (TopNavigation) टेम्पलेट का उपयोग करें, इसलिए यह header.html सामग्री दिखाना चाहिए लेकिन यह खाली के रूप में आ रहा है। यह कोई त्रुटि भी नहीं दे रहा है। निश्चित नहीं कि मुझसे कौन सी गलती हो रही है।

नोट: यदि मैं सीधे TopNavigationspreadsheet.module.ts में घोषित करता हूं तो यह ठीक काम करता है। से

पहले, निर्यात TopNavigation & Search घटकों: लेकिन जब से नेविगेशन और खोज आम हैं मैं नहीं चाहता कि हर एक मॉड्यूल में यह घोषणा करने के लिए है कि केवल में app.module.ts

Answer 1

दो बातें यहाँ किया जा करने की जरूरत है होना चाहिए चाहते हैं 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 आयात करते हैं तो इसका कोई प्रभाव नहीं पड़ता है।

अधिक जानकारी के लिए आप here पढ़ सकते हैं।