如何动态地将一个组件附加到另一个组件上？

Question

我在页面上有一些组件DOM：

<app-alert #type1 type="1"></app-alert>
<app-alert #type2 type="2"></app-alert>
<app-alert #type3 type="3"></app-alert>

我可以管理他们的订购吗？将#type1移至#type2和#type3移至#type2？

还是使用递归组件更好？

Answer 1

您可以执行以下方法：

在应用程序警报组件html中，您将此标签<ng-content></ng-content>

然后您可以像这样使用它：

<app-alert #type1 type="1">

  <app-alert #type2 type="2">

    <app-alert #type3 type="3"></app-alert>

  </app-alert>

</app-alert>

您可以在此blog中阅读更多内容。

Answer 2

您有递归问题。如果您不想使用递归组件，则可以使用递归ng-template引用。您可以在此处找到示例的解释：https://www.bennadel.com/blog/3512-playing-with-recursive-ng-template-references-in-angular-6-1-10.htm

但是对于我来说，使用递归组件对我来说更清楚。