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

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

<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”按钮,我想要“”
“<花式按钮>< /花式按钮>” 中要放入页面的相应部分,我希望能够在页面模板的不同部分内动态“创建”独立“花式按钮”的实例.我可以坚持使用ng-for 3 ng-if语句,尽管这似乎不切实际.寻找更好的替代方案……

更新：所以步骤将是：

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

用户可以重复单击相同的“创建花式按钮”按钮以在此下创建更多.如果用户将输入框更改为“topsection”,则当用户单击“创建花式按钮”时,fancybutton组件将添加到带有“topsection”的div下.

如果用户输入“newsection”,那么将在div下使用类名“container”创建一个类名为“newsection”的新div,并将fancybutton组件添加到具有classname“newsection”的div中.

在组件中有一系列标签.

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

要添加新的花式文本框,请向阵列添加新标签.

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

在组件中：

labels: string[] = [];

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

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

猜你在找的Angularjs相关文章