如何以编程方式在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>”要放入页面的适当部分，我希望能够在页面模板的不同部分动态“创建”独立“花式按钮”的实例。我可以将 3 个 ng-if 语句与 ng-for 结合起来，尽管这似乎不切实际。正在寻找更好的选择...

更新：所以步骤是：

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

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

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

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');

Answer 2

看看这个“架构”，并利用 JS/TS OO 类继承，我会个人 考虑添加一个“复合组件”（“cc”：遵循OO'复合'模式）到每个部分（例如：<top-section-cc-fancytextboxes...></> 或<bot-section-cc-fancytextboxes...></>）。这些用作各种<fancy-textbox> 类型的“占位符”，这些类型可以是每个cc（复合组件）内的零个或多个实例。 现在每个复合组件都从基类/接口组件（例如：<base-section-cc-fancytextboxes>）派生/实现，其中包含管理添加多个<fancy-textbox> 类型的基本方法。然而，派生类方法会“知道”在哪里添加正确的<fancy-textbox>s（可能是上面提到的*ngFor'd 数组）。至于实例化特定类型的<fancy-textbox>，也许利用类工厂模式也很有用——可能是一个返回实例并由复合组件驱动的AJ2 服务提供者。

不管怎样，AJ2 内置了 TS OO，尽管有细节，这是我个人用来解决这个特殊问题的向量。这只是一个想法。

Answer 3

你需要动态加载组件

这是我的解决方案

Parent.component.ts

import { Component, OnInit, ViewChild, ViewContainerRef, Input, ComponentFactoryResolver, ReflectiveInjector } from
    "@angular/core";

import { FancyButtonCompoent } from "../FancyButton.component";

@Component({
    moduleId: module.id,
    selector: "app-parent",
    templateUrl: "parent.component.html",
    styleUrls: ["parent.component.css"],
    entryComponents: [FancyButtonCompoent]

})
export class ParentCompoent {

    @ViewChild("midsection", { read: ViewContainerRef })
    midsectionContainer: ViewContainerRef;

    constructor(private resolver: ComponentFactoryResolver) {
    }

    createFancyButton() {
        //Name Is Fancybutton data binding property
        var yourdatavalues= {Name:'myname'}
        this.createDynamicbutton({
            input: yourdatavalues,
        });
    }
    //you can add your own model to get what you want like remove,move
     // var dynamiccompoent={Data:yourmodel,compoentcontainer:any}
     //fancybuttonarray:dynamiccompoent[];

 fancybuttonarray:any[];

    createDynamicbutton(elementData) {
        if (!elementData) {
            return;
        }

        // Inputs need to be in the following format to be resolved properly
        let inputProviders = Object.keys(elementData.inputs)
            .map((inputName) => { return { provide: inputName, useValue: elementData.inputs[inputName] }; });
        let resolvedInputs = ReflectiveInjector.resolve(inputProviders);

        // We create an injector out of the data we want to pass down and this components injector
        let injector = ReflectiveInjector
            .fromResolvedProviders(resolvedInputs, this.midsectionContainer.parentInjector);

        // We create a factory out of the component we want to create
        let factory = this.resolver.resolveComponentFactory(DefaultButtonComponent);

        // We create the component using the factory and the injector
        let component = factory.create(injector);

        this.midsectionContainer.insert(component.hostView)

         //your getting every instance of fancy button instance into array
         this.fancybuttonarray.push.(component )

         //if you want to clear elment if you wish
         //this.fancybuttonarray[0].destroy()
          //this.fancybuttonarray[1].destroy()


    }
}

parent.component.html

<div   class="row col-lg-12" >
    <div #midsection >

    </div>
</div>

Fancybutton.compoent.ts

    import { Component, OnInit, Injector } from '@angular/core';


@Component({
    moduleId: module.id,
    selector: 'Fancy-button',
    templateUrl: 'Fancybutton.component.html'
})
export class FancybuttonComponent {

    inputelement:yourDatamodel
    constructor(private injector: Injector) {
        this.inputElement = this.injector.get('inputElement');
    }

}

Fancybutton.compoent.html

    <div>
    <button title="inputelement.Name"(click)r ="alert(inputelement.Name)"></button>
    </div>    

更新

这是一篇关于使用angular2动态加载子组件的好帖子

也可用Plunker example

Answer 4

我认为您不需要任何其他范围/组件。这样的事情应该可以工作。

组件（TypeScript）：

sections: {[key] : string[]} = {};

createFancyButton: (section: string) => {
    if (!this.sections[section]) {
        this.sections[section] = [];
    }
    this.sections[section].push('');
}

getSectionKeys: () => {
    return Object.keys(this.sections);
}

“sections”属性是一个可索引对象，这意味着它的行为类似于哈希表。 section 对象的每个属性（“key”）都是一个字符串数组，代表花哨的按钮值（ngModel）。

模板 (HTML)

<div class="container">
    <div class="navsection">
        <input #section type="text" placeholder="section" />
        <button (click)="createFancyButton(#section.value)">Create Fancy Button</button>
    </div>
    <div *ngFor="let key of getSectionKeys()" [class]="key">
        <fancy-textbox *ngFor="let textBox of sections[key]" [(ngModel)]="textBox"></fancy-textbox>
    </div>
</div>

有一个模板引用变量 (#section)，它提供了对模板中 DO​​M 元素的轻松访问。然后我们 *ngFor 从sections hashtable 中的keys 来创建每个section div。最后，我们 *ngFor 遍历每个部分的字符串数组。

更多关于模板引用变量的信息可以在这里找到。 https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ref-vars

注意：可能有错别字，因为我没有测试。

Answer 5

这是您以编程方式构建和添加组件的方式：

import {ComponentRef, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';

@Component({
    selector: 'fancy-box',
    template: `<div>{{fancyContent}}</div> `,
})
export class FancyBox {

    fancyContent;

    doStuff() {
        console.log('done');
    }
}

@Component({
    selector: 'fancy-parent',
    template: `<div (click)="addNewFancyBox()">Add Box</div> `,
})
export class FancyParent {
    private counter = 0;

    constructor(
        private viewContainerRef: ViewContainerRef,
        private resolver: ComponentFactoryResolver) {
    }

    addNewFancyBox() {

        const factory = this.resolver.resolveComponentFactory(FancyBox);
        fancybox = this.viewContainerRef.createComponent(factory);

        const fancyboxElement = fancybox.instance as FancyBox;
        fancyboxElement.content = 'box number: ' + counter;

        fancyboxElement.doStuff();
        counter++;
    }
}