Angular 模块/组件 - 单独显示以及在另一个模块/组件内显示？

Question

假设我有 ModuleA 的路由器条目：

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

ComponentA（ComponentA的选择器是component-a）

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 的模板（即使它由于其他原因而失败）。

我也不能通过将<div class="component-a"></div> 和<component-a></component-a> 切换到它来让它在ComponentB 中显示ComponentA。

我发现最接近我想要做的是Angular 2 component inside other component。这看起来很有希望，但是当我尝试将 ComponentA 作为指令添加到 ComponentB 并使用 <component-a></component-a> 时，它会引发错误“'component-a' is not a known element...”

TL;DR:

我希望我的模块/组件显示在我的应用程序自己的页面上，以及显示在应用程序其他地方的另一个模块/组件内。

Answer 1

您应该从您的moduleA 导出componentA，这样您就可以安全地在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>