Повторное использование компонента Detached в Angular

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);, я получаю отдельное представление, которое, как мне кажется, я могу использовать повторно, но оно не работает. Пожалуйста, помогите :( Заранее спасибо:)