Question

我正在根据用户点击动态创建一个组件。

用户可以创建6个文本区域。删除创建的区域并重新创建。我用于根据用户操作扩展文本区域的代码：-

  onTextClick(){
let componentFactory = this.CFR.resolveComponentFactory(TextareaComponent);
 let componentRef: ComponentRef<TextareaComponent> 
  =this.VCR.createComponent(componentFactory);
 let currentComponent = componentRef.instance;
 this.index ++;

 currentComponent.compInteraction = this;
 componentRef.instance._ref = componentRef;
  this.componentsReferences.push(componentRef);
 }

我的代码用于根据用户操作删除Textarea：-

 remove(index: number) {

if (this.VCR.length < 1)
  return;

let componentRef = this.componentsReferences.filter(x => x.instance.index == index)[0];
let component: ChildComponent = <ChildComponent>componentRef.instance;

let vcrIndex: number = this.VCR.indexOf(componentRef)

// removing component from container
this.VCR.remove(vcrIndex);

this.componentsReferences = this.componentsReferences.filter(x => x.instance.index !== index);

}

我想实现的目标是。用户删除区域后，可以再次创建它。由于我对textarea模板有很多绑定（即6个Textarea）。用户删除组件后，我无法创建新组件。我只需要重复使用删除的区域。

如果我使用let deletedView = this.VCR.detach(index);，则会得到一个分离的视图，我觉得我可以重用它，但是它不起作用。请帮助:(预先感谢：）

重用Angular中的Detached组件

0 个答案: