ngDestroy 生命周期方法不会为动态创建的组件触发。 我正在使用ComponentFactoryResolver动态创建多个组件

在我动态创建的组件中,我从 API 获取一些数据,并且我每隔 5 分钟使用setInterval方法定期获取数据。 我正在清除 ngDestroy 方法中的 Interval 实例,在重定向到不同页面时,组件的 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 ....
  }
}

#1楼 票数:3 已采纳

您需要通过手动调用来销毁动态加载的组件: 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
    }
}

有关更多信息: how-to-dynamically-create-a-component-in-angular

  ask by Mohammed Ismail translate from so

未解决问题?本站智能推荐:

1回复

如何通过以angular8动态形式刷新页面来选择下拉列表和日期?

嗨,我正在研究 Angular Dynamic 表单这是到目前为止我尝试过的代码: 闪电战所以,现在我希望日期应该预先填写到today's date ,下拉菜单应该是california ,当我更改值时,它也应该更改? 任何想法都会感激不尽?TIA。
3回复

Angular7-使用ngFor将数组中的最后一项设为A链接

我有一个菜单项列表,我想让数组中的最后一项成为链接。 现在菜单项是从一个组件构建的,但我不确定如何使数组中的最后一项成为链接。 ActionMenuItem.component.html ActionMenuItem.Component.ts
2回复

在从UI以angular上传之前可以压缩大文件吗?

从前端上传之前有什么方法可以压缩文件吗? 我有一个非常大的文件要上传,这需要很多时间。 我正在寻找一种减少上传时间的方法。
2回复

如何将此javascript和HTML代码添加到angular项目中?我可以从javascript函数以angular呈现html吗?

如何将此 javascript 和 HTML 代码添加到 angular 项目中? 我已将 func.js 放在我的 angular 项目和我的 app.component.ts 文件中的 src 文件夹中,我尝试导入并使用 ngAfterViewInit() 加载和使用 javascript 函数
1回复

如何根据用户在javascript或angular中的选择删除从数组上传的多个文件

嗨,我需要根据用户在 javascript 或 angular 中的选择删除从数组上传的多个文件.......我尝试使用以下代码首先我们有一些文件上传到一个数组中并显示在复选框中,如下代码所示 用户将单击要删除的复选框,然后单击显示的按钮和它调用如下所示的函数 所以在这个函数中,虽然用户选择了多个要
2回复

使用forkJoin将两个GET请求的结果合并到Angular8/Typescript中的单个可迭代对象中

我正在使用 forkJoin 从两个单独的端点获取结果。 我可以迭代 results[0] 和 results[1] 但是,我不能深入到这些值。 IE:我不能做 results[0].amiiboId 它总是返回 undefined,即使当我查看 results[0] 的完整对象时,我可以看到它有
1回复

Angular8:从JSON服务器获取数据并使用复选框过滤表中的数据

我正在处理一个 angular 项目,需要有关如何使用表格中的复选框过滤数据的帮助。 我有一个家庭组件,其中使用服务以表格格式从 json 服务器显示数据。 我有另一个过滤器组件,我在其中实现了过滤器。 如果用户单击过滤器,表中的数据应根据复选框输入而更改。 加载表的 Home.component.
2回复

Angular8:基于组件在html中动态设置formControlName

在 db 表中,我有“key_name”,它在 API 中成功返回并且运行良好。 我想要做的是将这些字段值设置为 html 和组件中的formControlName我使用的是反应形式,所以我尝试了formArrayName 。 基于更改事件,我在categoryArray推送新的formContro