时间戳

首页 > 解决方案 > Angular 模块/组件 - 单独显示以及在另一个模块/组件内显示？

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

问题描述

假设我有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像这样显示在 's 的模板中：

<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>

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

TL;博士：

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

标签： javascriptangularangular5

解决方案

您应该componentA从您的中导出moduleA，以便您可以componentB通过导入ModuleA在 中安全地使用它ModuleB。

这将解决您的错误

“‘组件-a’不是已知元素……”

模块A.module.ts：

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

模块B.module.ts：

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

组件B.component.ts

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

   <component-a></component-a>

   Do more stuff
</div>

推荐阅读