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

Question

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

我在一个名为dynamic component的组件下创建了名为block0，block1，block2和block3的4个独立组件。 然后我简单地将块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），但是由于block1的选择器不在动态组件的HTML文件中，所以我被卡住了。

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

Answer 1

您可以执行以下步骤：

1. 创建一个可用作父页面的页面。 （比方说吧 仪表板或主页）
2. 创建需要的4个组件     在DashboardPage上呈现。在这些组件中使用选择器。也，     导出这些类。恩。选择器是地图，组件是     MapComponent。
3. 在仪表板中，HTML包括那个选择器 小时候工作。恩。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="select-box" id="slcCountry"> <li flag="https://restcountries.eu/data/afg.svg">AFG</li> <li flag="https://restcountries.eu/data/ala.svg">ALA</li> <li flag="https://restcountries.eu/data/alb.svg">ALB</li> </ul>

就像你可以为所有其他组件做的那样。