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

我也无法通过将ComponentA与ComponentB切换到<div class="component-a"></div>来在<component-a></component-a>内显示ComponentA。

我发现与我想做的最接近的是Angular 2 component inside other component。这看起来很有希望，但是当我尝试将ComponentB作为指令添加到<component-a></component-a>并使用{{1}}时，会引发错误，提示“'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>

角度模块/组件-单独显示还是在另一个模块/组件内部显示？

1 个答案: