Angular 2+, как ссылаться на компонент в одноранговом модуле

Question

Угловой 2 - 7: (Источник ниже): У меня есть модуль SectionA с компонентами a и b. Узлом SectionA является модуль SectionB с компонентами ba и bb. Родитель ОБА Раздела А и Раздела B называется all-section.module.ts. В app.module я ТОЛЬКО ссылаюсь на «модуль всех секций», и у меня нет проблем с отображением работы каждого из компонентов секции A и секции B (показано ниже).
Компонент 'a' МОЖЕТ использовать 'b' в своем html, но я не могу сослаться на его двоюродного брата 'bb' из SectionB. Вопрос: как показать 'bb' из 'a'.

Модуль А секции

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AComponent} from './a/a.component';
import { BComponent } from './b/b.component';

@NgModule({
  declarations: [
    AComponent,
    BComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    AComponent,
    BComponent
  ]
})
export class SectionAModule { }

Модуль SectionB (довольно очевидный)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BaComponent } from './ba/ba.component';
import { BbComponent } from './bb/bb.component';

@NgModule({
  declarations: [
    BaComponent,
    BbComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    BaComponent,
    BbComponent
  ]
})
export class SectionBModule { }

Модуль всех разделов

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {SectionAModule} from '../SectionA/SectionA.module';
import {SectionBModule} from '../SectionB/SectionB.module';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    SectionAModule,
    SectionBModule
  ],
  exports: [
    SectionAModule,
    SectionBModule
  ]
})
export class AllSectionsModule { }

app.module только импортирует AllSectionsModule, тогда app.component.html выглядит так:

<div>
  <app-a></app-a>
  <app-b></app-b>
  <app-ba></app-ba>
  <app-bb></app-bb>
</div>

Запуск приложения работает как положено:

Но я не могу найти способ сослаться на «bb» из «a», например, вот так:

в надежде получить что-то подобное, когда я просто назову «а». Это «a.html»:

<p>
  a works!  and
  <app-b></app-b> from within Section A  component a WORKS

BUT:
  <app-bb></app-bb>
  This won't work no matter how I try to reference it.
</p>

Заранее спасибо! Чак

Answer 1

Да, вы можете ссылаться на компоненты из «Раздела A» в «Раздел B». При объявлении компонентов в SectionB.module.ts.

Добавьте компоненты (для совместного использования) в вашем случае это "bbComponent" в export Массив, как вы сделали в декларациях массивах

например, экспорт: ['bbComponent'].

Теперь импортируйте модуль SectionB в SectionA.module.ts.

После этого вы сможете использовать этот компонент. Это не будет хорошей практикой.

Вместо этого создайте общий модуль из компонентов, которые вы хотите использовать в разных модулях. Это позволит избежать проблемы циклических ссылок.

Надеюсь, что помогло.

Answer 2

Если вы хотите использовать компонент из другого модуля, вам нужно экспортировать компонент из модуля, который содержит компонент, и импортировать этот модуль в ваш модуль: вы можете найти больше информации здесь