Использование субмодулей, реализующих их собственные компоненты

Question

Итак, сейчас я импортирую целую кучу отдельных компонентов в app.module, чтобы охватить все, что мне нужно использовать.

AppModule 
    -Header Component 
    -Header Sub-Component 1 
    -Header Sub-Component 2 
    -Header Sub-Component 3 

Что бы я в идеале хотел бы сделать это, а не импортировать их все в app.module, я хотел бы создать header.module, который обрабатывает импортирует все свои собственные компоненты, так что app.module необходимо импортировать только header.module и header.module обрабатывает свои собственные зависимости.

Я пробовал так много способов сделать это, но я просто не могу заставить его работать. Какая структура должна быть?

Я пытался просто сделать:

import { HeaderModule } from "./header/header.module"; 

В AppModule, а затем есть HeaderModule, который выглядел так:

// Core 
import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 

// Components 
import { HeaderComponent } from "./header.component"; 
import { ButlerBarComponent } from './butler/butler.component'; 

@NgModule({ 
    declarations: [ 
     HeaderComponent, 
     ButlerBarComponent 
    ], 
    imports: [BrowserModule], 
    providers: [], 
    bootstrap: [ButlerBarComponent] 
}) 

export class HeaderModule { } 

Просто, чтобы попытаться получить зависимость модуля> набор компонентов вверх, но когда я это делаю, объявление, которое вызывает компонент заголовка в app.component.html, больше не имеет доступа к селектору header.

Что мне нужно сделать, чтобы сделать эту работу, так что я могу поставить <header></header> тег в app.component.html и имеют нагрузку приложений header.module и последующее header.component и сделать селектор header доступной app.component.html?

Answer 1

Вы должны объявить все эти компоненты в HeaderModule, а затем экспортировать их так AppModule могут получить доступ к ним при импорте HeaderModule в AppModule. Кроме того, вы должны импортировать BrowserModule только в AppModule, в других ваших модулей вы должны импортировать CommonModule вместо поскольку она содержит общие директивы, такие как ngIf, ngFor, ngClass и т.д. И, наконец, вам не нужно самонастройки здесь, потому что вы только самонастройки один компонент в вашем приложение, и вы делаете это в AppModule. Таким образом, ваш HeaderModule должен выглядеть следующим образом:

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 

import { HeaderComponent } from "./header.component"; 
import { ButlerBarComponent } from './butler/butler.component'; 

@NgModule({ 
    imports: [ 
     CommonModule 
    ], 
    declarations: [ 
     HeaderComponent, 
     ButlerBarComponent 
    ], 
    exports: [ 
     HeaderComponent, 
     ButlerBarComponent 
    ] 
}) 

export class HeaderModule { } 

Теперь вам нужно только добавить HeaderModule ваш импорт AppModule «s, и вы должны быть готовы к работе.