如何以编程方式动态创建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');

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...