如何在角度中的特定位置调用另一个组件

Question

我有两个角度组件，如下所示：

mycomponent.component.html

<app-mycomponent2>
<p> this is a text </p>
</app-mycomponent2>

mycomponent2.component.html

<div class="bg-blue">
<!-- the code of first component should be added here-->
</div>

现在我不知道如何让我的第二个组件在特定位置调用代码，因为我将在组件中多次使用此代码，而我想避免复制/粘贴使用我描述的结构。

Answer 1

我不确定“调用代码”是什么意思，但听起来你对“内容投影”很感兴趣。您可以使用<ng-content>标记来包含然后“投影”到组件中进行渲染的内容。在您的情况下，<p>this is a text</p>内容将通过<ng-content>标记投射到mycomponent2中。

这是投影的一个很好的例子： https://codecraft.tv/courses/angular/components/content-projection/