angular2：使用* ngFor

Question

我已使用按钮点击手动创建了动态组件。如果我们点击Add按钮，它将在添加按钮旁边创建组件。如果我们点击“删除”按钮，它将删除该组件。

Plunker

这里的问题是使用ngFor创建组件时，单击“删除”按钮时无法删除组件。我注意到在使用ngFor创建组件时没有发生删除函数调用。

在我的代码下面：

父组件：

import{ Component, Input, Output, EventEmitter, ViewContainerRef,      ElementRef, ComponentRef, ComponentResolver,    ViewChild, ComponentFactory } from '@angular/core';
import {ChildCmpt } from './child-cmpt';
import {SharedData } from './SharedData';


    @Component({
        selector: 'my-app',
        templateUrl: 'src/parent-cmpt.html',
        directives: [ChildCmpt]
    })
    export class ParentCmpt {

        myAllNames: any;
        @Input() thing:string;
        //allItems: ItemsAddRemove;
        constructor(private resolver: ComponentResolver, private appItems: SharedData) {
            this.myAllNames = this.appItems.getNames();
        }

        idx:number = 0;

        @ViewChild('location', { read: ViewContainerRef}) location: ViewContainerRef;

        add() {
            this.resolver.resolveComponent(ChildCmpt).then((factory:ComponentFactory<any>) => {
                let ref = this.location.createComponent(factory)
                ref.instance._ref = ref;
                ref.instance._idx = this.idx++;
                ref.instance._thing = this.thing;
                //allItems.push(ref);
                this.appItems.addMyItem(ref);

            });
        }

        submit(a: any) {
            let temp = this.appItems.getMyItem();
            let componentThings = temp.map((compRef) => compRef.instance.thing);
            alert(componentThings);
        }

        removeAll = ():void => {
            // do cleanup stuff..
            this.location.clear();
            this.appItems.removeAll();
        }
    }

子组件：

import { Component, Input, Output, EventEmitter, ViewContainerRef, ElementRef, ComponentRef, ComponentResolver, ViewChild, ComponentFactory } from '@angular/core';
import {SharedData } from './SharedData';


@Component({
    selector: 'child-cmpt',
    templateUrl: 'src/child-cmpt.html'
})
export class ChildCmpt {
    _ref:ComponentRef<any>;
    _idx:number;
    allVal = [];

    @Input() thing:string;
    public components = [];

    constructor(private resolver: ComponentResolver, private location: ViewContainerRef, private appItems: SharedData) {

    }

    remove() {
        let temp = this.appItems.getMyItem();
        delete temp[temp.indexOf(this._ref)];
        this._ref.destroy();
    }

    add() {

        this.resolver.resolveComponent(ChildCmpt).then((factory:ComponentFactory<any>) => {
            let ref = this.location.createComponent(factory, 0);
            ref.instance._ref = ref;
            ref.instance._idx = this._idx++;
            ref.instance._thing = this.thing;
            //this.allItems.push(ref);
            this.appItems.addMyItem(ref);
        });
    }
}

请帮我解决这个问题。 非常感谢你的帮助。

先谢谢。

Answer 1

存储ComponentRef并在您要删除时调用destory()：

@Component({
    selector: 'my-app',
    templateUrl: 'src/parent-cmpt.html',
    directives: [ChildCmpt]
})
export class ParentCmpt {

    myAllNames: any;
    @Input() thing:string;
    //allItems: ItemsAddRemove;
    constructor(private resolver: ComponentResolver, private appItems: SharedData) {
        this.myAllNames = this.appItems.getNames();
    }

    idx:number = 0;

    @ViewChild('location', { read: ViewContainerRef}) location: ViewContainerRef;

    add() {
        this.resolver.resolveComponent(ChildCmpt).then((factory:ComponentFactory<any>) => {
            this.ref = this.location.createComponent(factory)
            ref.instance._ref = ref;
            ref.instance._idx = this.idx++;
            ref.instance._thing = this.thing;
            //allItems.push(ref);
            this.appItems.addMyItem(ref);

        });
    }

    submit(a: any) {
        let temp = this.appItems.getMyItem();
        let componentThings = temp.map((compRef) => compRef.instance.thing);
        alert(componentThings);
    }

    removeAll():void {
        // do cleanup stuff..
        this.ref.destory();
    }
}