Angular组件模板继承

Question

情况如下:

我有一个外部组件，里面还有其他组件。假设我创建了一个baseComponent，它有一个边框和一个关闭按钮。我想在里面展示一些东西。这可以是很多组件，但它们都需要有一个边框和一个关闭按钮。

所以我首先想到了这样的东西:

<baseComp><imageComp></imageComp></baseComp>
<baseComp><textComp></textComp></baseComp>

baseComponent应该处理边框和关闭按钮。

但是baseComponent的模板是这样的:

<div class="border"><img class="closebutton">...</div>

但是我如何在这三个点上得到一些东西呢?

这是怎么筑巢的?

我想让结果看起来像这样:

<div class="border"><img class="closebutton"><imageComp></imageComp></div>

Answer 1

看一下内容投影。使用<ng-content></ng-content>，您可以将内部组件(<imageComp></imageComp>)投射到父组件的模板中。你的父组件看起来像这样:

<div class="border"><img class="closebutton"><ng-content></ng-content></div>

你的子组件看起来像:

<baseComp>
<!-- Contents of ImageComp -->
</baseComp>