angular - 如何以编程方式在angular2中动态创建组件的多个独立实例？

Question

我有一个按钮组件 fancy-textbox .我想让用户可以动态添加新的 fancy-textbox , 但它们在文本框上方有不同的标签，这些标签基于 fancy-textbox 独有的范围变量本身(或者可能来自未在所有 fancy-textboxes 之间共享的父范围变量)。我该怎么做呢？目前，我直接在显示和隐藏模板中使用它，但我希望能够以编程方式“动态添加更多实例”:

<div *ngIf="showTextBox">
    <fancy-textbox labelForBox="TextBox 1"></fancy-textbox>  
</div>

如果花式文本框仅在 DOM 中的一个特定区域创建，那就太好了。但是，我想做的是能够在 DOM 的不同部分动态创建组件。

    <div class="container">
<div class="navsection"><input id="classname" type="text"><button (click)="createFancyButton()">Create Fancy Button</button></div>
    <div class="topsection">
    </div>
    <div class="midsection">
    </div>
    <div class="botsection">
    </div>
<div class="footsection"></div></div>

鉴于上面的模板...假设用户将类名(例如 botsection)输入文本框并点击“createfancybutton 按钮”，我想要“”“<fancy-button></fancy-button> ”要放入页面的适当部分，我希望能够在页面模板的不同部分动态地“创建”独立“花式按钮”的实例。我可以用 ng-for 粘贴 3 个 ng-if 语句，尽管这看起来不切实际。寻找更好的选择...

更新:所以步骤是:

1) 用户在文本框中输入“midsection”。2)用户点击按钮“创建花式按钮”3) - <fancybutton></fancybutton>组件将添加到类名为“midsection”的 div 下-

用户可以重复点击同一个“Create Fancy Button”按钮以在其下创建更多。如果用户将输入框更改为“topsection”，那么当用户点击“Create Fancy Button”时，fancybutton 组件将被添加到带有“topsection”的 div 下。

如果用户输入“newsection”，则会在类名为“container”的div下创建一个类名为“newsection”的新div，并将fancybutton组件添加到类名为“newsection”的div中。

Answer 1

在你的组件中有一个标签数组。

使用 *ngFor 迭代这个数组并为每个标签生成一个精美的文本框。

要添加新的花式文本框，请向数组添加新标签。

<fancy-textbox *ngFor="let label of labels" [labelForBox]="label"></fancy-textbox>  

在组件中:

labels: string[] = [];

// to add a fancy textbox:
this.labels.push('new label');