Жизненный цикл ngDestroy не запускается в динамически создаваемом компоненте Angular

Question

Метод жизненного цикла ngDestroy не запускается для динамически создаваемого компонента. Я создаю несколько компонентов динамически, используя ComponentFactoryResolver .

В моем динамически созданном компоненте я извлекаю некоторые данные из API и периодически извлекаю данные каждые 5 минут, используя метод setInterval . и я очищаю экземпляр Interval внутри метода ngDestroy, при перенаправлении на другую страницу компонент ngDestroy не запускается, а API запускает даже компонент, которого нет в представлении.

Вот как я динамическое создание компонентов.

    const factory = this.resolver.resolveComponentFactory(DynamicComponent); // Component Construction
    const ref = factory.create(this.injector);

Вот мой DynamicComponent, который имеет функциональные возможности

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

@Component({
  selector: "app-dynamic,
  templateUrl: "./dynamic.component.html",
  styleUrls: ["./dynamic.component.scss"]
})
export class DynamicComponent implements OnInit, OnDestroy {
  loopCount: number;
  autoRefreshInterval: any;
  constructor() {}

  ngOnInit() {
    this.fetchData();
    this.startAutoRefreshLoop();
  }

  ngOnDestroy(): void {
    console.log("Destroying loop"); // ngOnDestroy is not triggering
    this.clearAutoRefreshLoop();
  }

  clearAutoRefreshLoop() {
    clearInterval(this.autoRefreshInterval);
  }

  /*
    function for starting the Automatically recall the service for certain period of time
  */
  startAutoRefreshLoop() {
    console.log("starting loop");
    this.loopCount = 10 * 1000;
    this.autoRefreshInterval = setInterval(() => {
      this.fetchData();
    }, this.loopCount);
  }

  fetchData() {
    // FETCHING DATA FROM API CODE ....
  }
}

Answer 1

Вам необходимо уничтожить динамически загруженный компонент, вручную вызвав: this.componentRef.destroy(); для запуска ngOndestroy()

Пример:

import {
    Component,
    ViewChild,
    ViewContainerRef,
    ComponentFactoryResolver,
    ComponentRef,
    ComponentFactory
} from '@angular/core';
import { DynamicComponent } from './dynamic.component';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    title = 'app';
    componentRef: any;
    @ViewChild('container', { read: ViewContainerRef }) entry: ViewContainerRef;
    constructor(private resolver: ComponentFactoryResolver) { }
    createComponent(message) {
        this.entry.clear();
        const factory = this.resolver.resolveComponentFactory(DynamicComponent); 
        this.componentRef = this.entry.createComponent(factory);
    }
    destroyComponent() {
        this.componentRef.destroy(); // you need to call this
    }
}

Для получения дополнительной информации: с практическими рекомендациями -dynamically-Create-A-компонент-in angular