javascript - ngDestroy lifecycle is not Triggering in dynamically created Angular component - Stack Overflow

admin管理员组

文章数量:1355615

ngDestroy lifecycle method is not triggering for dynamically created ponent. I'm creating multiple ponent dynamically using ComponentFactoryResolver.

In my dynamically created ponent I'm fetching some data from API and I'm periodically fetching the data for every 5 mins using setInterval method. and I'm clearing the Interval instance inside ngDestroy method , while redirecting to different page, the ponent's ngDestroy is not triggering and the API is triggering even the ponent is not in the view.

This is how I'm creating ponents dynamically.

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

Here is my DynamicComponent which has the functionalities

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

@Component({
  selector: "app-dynamic,
  templateUrl: "./dynamicponent.html",
  styleUrls: ["./dynamicponent.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 ....
  }
}

ngDestroy lifecycle method is not triggering for dynamically created ponent. I'm creating multiple ponent dynamically using ComponentFactoryResolver.

In my dynamically created ponent I'm fetching some data from API and I'm periodically fetching the data for every 5 mins using setInterval method. and I'm clearing the Interval instance inside ngDestroy method , while redirecting to different page, the ponent's ngDestroy is not triggering and the API is triggering even the ponent is not in the view.

This is how I'm creating ponents dynamically.

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

Here is my DynamicComponent which has the functionalities

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

@Component({
  selector: "app-dynamic,
  templateUrl: "./dynamic.ponent.html",
  styleUrls: ["./dynamic.ponent.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 ....
  }
}

• javascript
• angular
• angular7
• angular8

Share Improve this question Follow asked Feb 21, 2020 at 10:08 Mohammed IsmailMohammed Ismail 30811 gold badge44 silver badges1515 bronze badges 1

• Can you create a minimal working example on StackBlitz, for example? – alexander.sivak Commented Feb 21, 2020 at 10:10

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You need to destroy the dynamically loaded ponent by manually calling : this.ponentRef.destroy(); to trigger ngOndestroy()

Example :

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

For more information : how-to-dynamically-create-a-ponent-in-angular

本文标签： javascriptngDestroy lifecycle is not Triggering in dynamically created Angular componentStack Overflow