如何在单个页面的多个部分中创建多个动态组件？角 5答案

【问题标题】：How can I create multiple dynamic components in multiple sections on a single page? Angular 5如何在单个页面的多个部分中创建多个动态组件？角 5
【发布时间】：2018-09-14 21:37:49
【问题描述】：

我试图在一个页面内创建 4 个单独的 div，每个 div 的内容来自一个单独的组件。到目前为止，我已经使用 Component Factory 在单个页面上成功渲染了所有 4 个，但是我想要实现的是：第一个组件可以是静态的，因为它是初始页面，并且第一个组件中有按钮，当我单击第一个组件中的按钮时，我希望第二个 div 出现在它旁边（包含几个按钮），当单击第二个 div 上的按钮，第三个 div 应该出现在它旁边。到目前为止我所做的就是这个。

我在一个名为动态组件的组件下创建了 4 个独立的组件，名为 block0、block1、block2 和 block3。然后我只是将块 1 选择器保留在动态组件的 HTML 中（dynamic.component.html）这就是我所做的：

<app-block0 (notify)="onGroupReq($event)"></app-block0>
<ng-container #block1></ng-container>
<ng-container #block2></ng-container>
<ng-container #block3></ng-container>

然后我在 block0Component 中创建了一个事件发射器（这实际上是我的方法，但如果我在此过程中得到任何建议，我很乐意更改它）。我能够在单击 block0 中的元素时呈现下一个块（Block1Component），但是由于动态组件的 HTML 文件中没有 block1 的选择器，所以我被卡住了。

这很有意义，请建议我应该尝试什么更好的方法。非常感谢。

【问题讨论】：

标签： html angular typescript angular5

【解决方案1】：

您可以执行以下步骤：

创建一个将作为父页面工作的页面。（比方说仪表板或主页）
创建 4 个组件在 DashboardPage 上呈现。在这些组件中使用选择器。还，导出这些类。前任。选择器是map，组件是地图组件。
在 Dashboard HTML 中包含选择器，该选择器将像孩子一样工作。前任。 <map></map>

您也可以对所有其他组件执行此操作。

【讨论】：

如果我在仪表板中包含 4 个组件的选择器，它们只会呈现，但我需要阻止这种情况发生。我需要在点击时动态添加它们。
一个按钮点击可以有一个标志，如果它的值改变了加载第二个组件。在这种情况下，您可以通过该标志检查使用隐藏属性。将它们添加到第二个组件标签中。
不确定隐藏属性是否是个好主意，因为 IE10 和更早版本的浏览器支持问题。
终于用了你的建议，效果很好..非常感谢
我又被困在某个地方并尝试询问社区，但似乎人们只喜欢在没有任何理由的情况下投反对票，只是想知道您是否知道答案：stackoverflow.com/questions/50155119/…跨度>