Angular 8에서 이미 파괴 된 동적 구성 요소를 어떻게 표시 할 수 있습니까?

저는 앵귤러를 처음 접했습니다. 다음과 같이 작동하는 채팅 응용 프로그램을 만들고 있습니다.

사용자 목록이 있으며 각 사용자를 클릭 할 때 해당 사용자의 메시지가있는 상자를 표시해야 각 상자가 닫힐 수 있습니다. 다 괜찮아요.

내 문제는 각 상자를 닫을 때 해당 사용자를 클릭하면 다시 표시되지 않는다는 것입니다. 클릭 한 사용자의 ID가 배열에 저장되어 있고 해당 ID가 배열에있는 경우 표시되지 않는 것으로 확인 되었기 때문일 수 있습니다. 문제는 내가이 작업을 수행하여 상자가 이미 표시되고 다른 방법을 모르겠습니다.

app.component.ts

import { Component,ViewChild,ViewContainerRef,ComponentFactoryResolver,ComponentRef,OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { tap } from 'rxjs/operators';
import { ConversacionComponent} from "./components/conversacion/conversacion.component";
import {ChatService} from "./services/chat.service";
import {Mensaje} from "./models/mensaje";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers:[ChatService]
})
export class AppComponent implements OnDestroy {

    /*Esto se usa para poder crear el componente de las ventanas de chat dinamicamente y que cada uno pueda eliminarse*/
    @ViewChild('componentsContainer', { read: ViewContainerRef, static: false }) container: ViewContainerRef;
    private subs: Subscription[] = [];
    /****************/
    public id_usuario_destino:number;
    public personas:Array<any>;
    public id_persona:number;
    public mensajes:Mensaje[];
    public alreadyDone : number[];
    ngOnDestroy() {
        // unsubscribe from all on destroy
        this.subs.forEach(sub => sub.unsubscribe());

    }

    onClickAdd = (elemento) => {
        if(this.alreadyDone.findIndex(x => x === elemento.id) === -1)
        {
            this.alreadyDone.push(elemento.id);
            this.id_usuario_destino=elemento.id;
            this.id_persona=this.id_usuario_destino;
            this._chatService.getMessages(1,this.id_usuario_destino).subscribe(
                response=>{
                    if(response.mensajes){
                        this.mensajes=response.mensajes;
                        /*Este código es para crear las ventanas de chat dinamicas y que cada una pueda cerrarse*/
                        const factory = this.componentFactoryResolver.resolveComponentFactory(ConversacionComponent);
                        const component = this.container.createComponent(factory);
                        component.instance.destino=this.id_usuario_destino;
                        component.instance.numberCreated = this.container.length;
                        component.instance.men = this.mensajes;
                        // subscribe to component event to know when to delete
                        const selfDeleteSub = component.instance.deleteSelf
                            .pipe(tap(() => component.destroy()))
                            .subscribe();
                        // add subscription to array for clean up
                        this.subs.push(selfDeleteSub);
                        /*************************************************************************************/
                    }


                },
                error=>{
                    console.log(error);
                }
            );
        }



    }


    constructor( private componentFactoryResolver: ComponentFactoryResolver,private  _chatService:ChatService) {
        this.alreadyDone=[];
        this.personas=[
            {id:"2",
                nombre:"sergio"
            },
            {id:"3",
                nombre:"jhoyner"
            },
            {id:"4",
                nombre:"gerardo"
            },
            {id:"5",
                nombre:"fabrizio"
            }
        ]
    }



}

app.component.html

<div class="sidenav">
  <ul *ngFor="let persona of personas">
    <li><a id="{{persona.id}}"(click)="onClickAdd($event.target)">{{persona.nombre}}</a></li>
  </ul>

</div>

<ng-template #componentsContainer></ng-template>

dialog.component.html

<button (click)="deleteSelf.emit()" style="background-color: blue; color: white">close window</button>

<p>Number at time of creation: {{ numberCreated }}</p>
<div *ngFor="let message of men">
    {{message.contenido}}--{{message.fecha}}
</div>
<hr>

conversacion.component.ts

import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import {Mensaje} from "../../models/mensaje";

@Component({
    selector: 'app-conversacion',
    templateUrl: './conversacion.component.html',
    styleUrls: ['./conversacion.component.css']
})
export class ConversacionComponent implements OnInit {
    @Output() deleteSelf = new EventEmitter<void>();
    @Input() numberCreated: number;
    @Input() men:Mensaje[];
    @Input() destino:number;

    constructor() { }

    ngOnInit() {
    }


}