[英]angular2: Unable to call function while create dynamic component using *ngFor
我已经使用按钮单击手动创建了动态组件。 如果单击添加按钮,它将在添加按钮旁边创建组件。 如果单击删除按钮,它将删除该组件。
在这里,问题在于使用ngFor创建组件时,单击“删除”按钮时无法删除组件。 我注意到使用ngFor创建组件时未发生Remove函数调用。
在我的代码下面:
父组件:
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);
});
}
}
请帮助我解决此问题。 非常感谢您的帮助。
提前致谢。
要删除它时,请存储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();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.