Угловой модуль / компонент - отображение как внутри, так и внутри другого модуля / компонента?

Question

Допустим, у меня есть ModuleA с записью маршрутизатора:

path: 'modulea',
loadChildren: './modulea/modulea.module#ModuleA'

ComponentA (component-a селектор *1007*)

ModuleB сзапись маршрутизатора:

path: 'moduleb',
loadChildren: './moduleb/moduleb.module#ModuleB'

ComponentB (ComponentB селектор component-b)

ComponentA шаблон имеет <div class="component-a">...</div>, и если я пойду кmysite.com/modulea Я вижу все, что ожидаю увидеть.

Однако я не могу отобразить его в шаблоне ComponentB, например:

<div class="component-b">
   Do some stuff

   <div class="component-a"></div>

   Do more stuff
</div>

Какой тип делаетмне кажется, потому что в этот момент я чувствую, что я в основном переопределяю шаблон ComponentA (даже если по какой-то другой причине он не работает).

Также я не могу заставить его отображать ComponentA внутри ComponentB переключив <div class="component-a"></div> с <component-a></component-a> на него.

Самое близкое, что я нашел к тому, что я пытаюсь сделать, это Угловой 2 компонент внутри другого компонента .Это выглядит многообещающе, но когда я пытаюсь добавить ComponentA в качестве директивы к ComponentB и использовать <component-a></component-a>, выдается ошибка, что "component-a" не является известным элементом ... "

TL; DR:

Я хочу, чтобы мой модуль / компонент отображался на отдельной странице моего приложения, а также отображался внутри другого модуля / компонента в другом месте приложения.

Answer 1

Вы должны экспортировать componentA из вашего moduleA, чтобы вы могли безопасно использовать его в componentB, импортировав ModuleA в ModuleB.

Это исправит вашу ошибку

"'component-a' не является известным элементом ..."

moduleA.module.ts:

@NgModule({
declarations:[ComponentA],
exports:[ComponentA]
})
export class ModuleA{
}

moduleB.module.ts:

@NgModule({
declarations:[ComponentB],
imports:[ModuleA]
})
export class ModuleB{
}

componentB.component.ts

<div class="component-b">
   Do some stuff

   <component-a></component-a>

   Do more stuff
</div>