Как вы уничтожаете компонент Angular 2 без ComponentFactory?

При создании компонентов динамически через ComponentFactory возвращаемый компонент ComponentRef предоставляет метод destroy, который отлично работает для того, что я хотел бы выполнить, Имея это в виду, похоже, что все, что мне нужно сделать, это получить компонент ComponentRef для статически созданного компонента, а затем использовать его функцию destroy (в которой говорится этот ответ) но когда я пытаюсь это сделать, я получаю сообщение о том, что "destroy не является функцией", хотя я возвращаю объект обратно.

Вот синтаксис, который я использую для ViewChild:

@ViewChild(MyComponent) myComponentRef: ComponentRef<MyComponent>;

И мой вызов "destroy" :

private destroy() {
    this.myComponentRef.destroy();
}

Что вызвано здесь:

<button (click)="destroy()">Destroy</button>

Вызов этого метода "destroy" работает для компонентов, которые я создаю динамически, но не статически.

Изменить: Итак, похоже, что это частично удаляет компонент, но не из DOM, что не является тем же самым поведением, которое возникает при вызове "destroy" на динамически созданный компонент. Кроме того, функция click click по-прежнему срабатывает, когда я нажимаю на компонент, который я пытался уничтожить.

Изменить 2: я обновил синтаксис ViewChild, чтобы явно прочитать для ComponentRef, и я получаю "undefined" назад:

@ViewChild(MyComponent, {read: ComponentRef}) myComponentRef: ComponentRef<MyComponent>;

Если это возвращает "undefined", то я предполагаю, что это может быть невозможно.

Ответ 1

Вы можете добавить * ngIf в контейнер вашего компонента и в базу к условию (ngif) выполнить уничтожение и создать дочерний элемент. Пример:

В представлении:

<div *ngIf="destroy">
    <component-child></component-child>
</div>
<button (click)="destroyFunction()">Click to Destroy</button>

В родительском классе компонента:

//Declare the view child
@ViewChild(componentChild) componentChild: componentChild;

//Declare the destroy variable
destroy:boolean;

//Add a function to change the value of destroy (boolean)
public destroyFunction(){
    this.destroy = false;
}

Выполняя эти шаги, вы можете выполнить уничтожение дочернего элемента. Я надеюсь, что это сработает для вас эффективно

Ответ 2

Как сказал @JGFMK, вы должны использовать ngOnDestroy, но если вы введете переменную ViewChild как ComponentRef, вы получите ошибку (ошибка компиляции в моем случае).

Итак, это то, что я закончил, и он работает:

container.component.ts

import { Component, ViewChild } from '@angular/core';
import { MyComponent } from '../my/my.component';
@Component({
  selector: 'app-container',
  template: `
  <app-my></app-my>
  <button (click)="destroyIt()">Destroy</button>
  `,
})
export class ContainerComponent {

  @ViewChild(MyComponent) private myComp;

  destroyIt() {
    console.log('compref', this.myComp);
    this.myComp.ngOnDestroy();
  }

}

мой-component.ts

import { Component, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-my',
  template: `
  <p> my works!</p>
  `,
})
export class MyComponent implements OnDestroy {

  public ngOnDestroy() {
    console.log('destroyed');
  }

}