Winkel-5 - wie zu entfernen dynamisch hinzugefügte Komponenten aus dem dom

Ich bin ein Anfänger im Winkel 5, und ich bin mit dem folgenden problem in meinem Projekt:

ich habe ein modales der immer auf den Körper (ausgeblendet, wenn nicht aktiv), und ich bin der Erzeugung der modal-Inhalte dynamisch in die modale Komponente.

Das problem ist, dass nach dem schließen des modal, und versuchen zu zerstören, den Inhalt, der Inhalt ist nicht aus dem dom entfernt, und das öffnen des modalen wieder nur fügt den Inhalt der modale, die jetzt enthält mehrere Elemente der Inhalte.

So weit, ich habe versucht, es zu tun in mehrfacher Hinsicht, einschließlich der Verwendung *ngTemplateOutlet mit einer Vorlage, und auch mit einer benutzerdefinierten Richtlinie auf den container möchte ich den Inhalt in und mit viewContainerRef und componentFactoryResolver zu schaffen, die content-Komponente dynamisch, wie man hier sehen kann:
Dynamisch HINZUFÜGEN und ENTFERNEN von Komponenten in Eckige.

Hier ist mein modalen Komponente das template (den gesamten code hier bezieht sich auf die 2. Methode):

<div class="modal-backdrop show" (click)="hideModal()"></div>
 <div class="modal-dialog show">
  <div class="modal-content">
   <ng-container content></ng-container>
   <button type="button" class="close" data-dismiss="modal" 
     (click)="hideModal()">&times;</button>
  </div>
 </div>

Hier ist der Inhalt der Richtlinie, die Schaffung der Komponente wird hier getan:

@Directive({
  selector: '[content]'
 })
export class ContentDirective {
  constructor(
    public viewContainerRef: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver
  ) {}

createModalContent(content: { new (): Component }): ComponentRef<{}> {
  const sample = this.viewContainerRef;
  this.viewContainerRef.clear();
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
  content);
  const componentRef = this.viewContainerRef.createComponent(componentFactory);
  return componentRef;
 } 
}

Hier ist die modale Komponente ts-code, zu zerstören versucht, die Komponente ist in der hideModal Methode:

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css'],
  entryComponents: [SuggestSkillComponent]
})

export class ModalComponent implements OnInit {

newComponent: ComponentRef<{}>;
@Input() opened: boolean;
@Input() modalType: string;
@ViewChild(ContentDirective) content: ContentDirective;
modalState: string;
subscription: any;

constructor(private modalService: ModalService) {}

hideModal() {
  this.modalService.closeModal();
  this.newComponent.destroy();
}

ngOnInit() {
   this.subscription = this.modalService.getModalState()
   .subscribe(([modalState, modalContent]) => {
    if (modalState === 'shown') {
      this.newComponent = this.content.createModalContent(modalContent);
    }
  });
 }
}

Den modal geöffnet wird, durch eine andere Komponente mit einem modal-service-Methode, die erhält der Typ der Komponente, die für den Inhalt als parameter:

 openModal(content: any) {
  this.modalOpened = true;
  this.modalState = 'shown';
  this.emitter.emit([this.modalState, content]);
 }

In alle Wege die ich bisher ausprobiert habe, komme ich nicht an die Komponente, die ich erstellt für den modalen Inhalt zerstört, nachdem der Benutzer fertig ist mit ihm. Natürlich bin ich etwas fehlt...
Jede Hilfe wird sehr geschätzt werden.

Danke!

InformationsquelleAutor Eyal Rosenbaum | 2017-12-03