如何以编程方式动态创建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”按钮,我想要“” 更新:所以步骤将是: 1)用户在文本框中输入“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'); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |