Как использовать компонент в 3 модулях

Долгое время скрывается .. первый раз, когда что-то печатаю.

Мое приложение содержит 3 модуля

  • AppModule
  • Админмодуль
  • XLМодуль

Компонент AppHeader (заголовок веб-сайта) необходимо использовать в 3 вышеупомянутых модулях.

Сейчас он используется только в AppModule. Когда мне нужно было заставить «AppHeader» работать во втором модуле AdminModule, у меня действительно не было времени, чтобы на самом деле научиться использовать один компонент в разных модулях, поэтому я просто скопировал «AppHeader» и переименовал его. в «AdminHeader», а затем импортировал его в AdminModule для создания так называемого «обходного пути».

В то время у меня действительно не было «XLModule».

Теперь я хочу, чтобы «AppHeader» использовался во всех трех модулях, и я действительно хочу избавиться от этого скопированного «AdminHeader».

Итак, прямо сейчас в моем app.module я включил "AppHeader"

импортировать {AppHeaderComponent} из './components';

const APP_COMPONENTS = [AppHeaderComponent]

в моем NgModule у меня есть

@NgModule({
imports: [
BrowserModule,
CommonModule,
.... bunch of imports here nothing related to AppHeader and 2 other modules of the applications are also not imported

в моих декларациях:

...ПРИЛОЖЕНИЕ_КОМПОНЕНТЫ

в моем экспорте:

APP_COMPONENTS

Когда я пытаюсь импортировать «AppHeader» в любой из двух других модулей, я получаю сообщение об ошибке, что «AppHeader» используется двумя модулями.

Куда мне идти отсюда? Что я пропустил в AppModule, что нужно импортировать или экспортировать? И что нужно импортировать в 2 других модуля, чтобы этот «AppHeader» работал во всех 3 из них, фактически не создавая дубликатов компонентов.

Буду признателен за любую помощь!

Огромное спасибо!


core-ui angular-components angular-module angular5
person Alen    schedule 15.04.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

что я делаю в своих проектах для таких компонентов, так это то, что я создаю SharedModule (или любое другое имя, которое вы хотите для него) и добавляю любой компонент, который я хочу использовать в нескольких местах, в этот модуль, а затем вы можете импортировать этот модуль в любой модуль, который вы хотите использовать этот компонент.

это SharedModule:

import {NgModule} from '@angular/core';
import {HeaderComponent} from "./header.component/header.component";
@NgModule({
imports: [
    CommonModule,
],
declarations: [
    HeaderComponent,

],
exports: [
    HeaderComponent,
],
providers: [

]
})
export class SharedModule {
}

и это будет модуль, в котором я хочу использовать компонент:

import {NgModule} from '@angular/core';
import {SharedModule} from '../_shared.module/shared.module';

@NgModule({
imports: [
    SharedModule,

],
declarations: [

],
providers: [

]
})
export class ModuleIWantToUseComponentIn {
}
person Mohammad Reza    schedule 15.04.2018