首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何显示在Angular 8中已经被销毁的动态组件?

在Angular 8中,当一个动态组件被销毁后,我们可以通过使用ViewContainerRefComponentRef来显示已被销毁的动态组件。

首先,我们需要在组件中注入ViewContainerRef,它允许我们访问动态组件的视图容器。然后,我们可以使用ViewContainerRef.createComponent()方法来创建动态组件,并将其保存在一个ComponentRef对象中。

当动态组件被销毁后,我们可以通过调用ComponentRef.destroy()方法来销毁它。然而,销毁后的组件将不再显示在视图中。

为了显示已被销毁的动态组件,我们可以使用ViewContainerRef.insert()方法将其重新插入到视图中。这样,即使组件已被销毁,它仍然可以在视图中显示出来。

以下是一个示例代码:

代码语言:txt
复制
import { Component, ViewChild, ViewContainerRef, ComponentRef, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-dynamic-component',
  template: '<ng-template #container></ng-template>'
})
export class DynamicComponent implements OnDestroy {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
  componentRef: ComponentRef<any>;

  constructor(private viewContainerRef: ViewContainerRef) {}

  createComponent() {
    this.componentRef = this.container.createComponent(componentFactory);
  }

  destroyComponent() {
    this.componentRef.destroy();
  }

  showDestroyedComponent() {
    this.viewContainerRef.insert(this.componentRef.hostView);
  }

  ngOnDestroy() {
    if (this.componentRef) {
      this.componentRef.destroy();
    }
  }
}

在上面的示例中,DynamicComponent类中的createComponent()方法用于创建动态组件,destroyComponent()方法用于销毁组件,showDestroyedComponent()方法用于显示已被销毁的组件。

请注意,在组件销毁时,我们还需要在ngOnDestroy()生命周期钩子中调用destroy()方法来确保组件被正确销毁。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

在Java中,一个对象是如何被创建的?又是如何被销毁的?

Java 对象的销毁在Java中,对象的销毁是通过垃圾回收机制进行的。垃圾回收器会定期检查并清理不再被引用的对象,并回收它们所占用的内存。...在这个阶段,对象已经失去了被使用的价值。终结阶段:在Java中,提供了一个finalize()方法,这个方法在对象即将被垃圾回收时被调用。...开发者可以重写这个方法,定义对象在被销毁之前需要执行的清理操作。但是需要注意的是,finalize()方法并不能保证被及时地执行,也不能保证被执行多次。...然而,在某些情况下,可能需要手动进行一些销毁操作,如关闭文件或网络连接等。这种情况下,可以在对象的生命周期方法中执行这些操作。生命周期方法是指在对象不再被使用时被回调的方法。...总结:对象在Java中通过垃圾回收机制进行销毁,对象的生命周期包括创建、使用、不可达、终结和垃圾回收的阶段。可以通过重写finalize()方法来定义对象在销毁之前需要执行的清理操作。

45251

Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)

这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成NG-ZORRO相关的组件,并且介绍Angular相关目录结构、生命周期函数,路由配置和使用相关知识点,以及如何使用Angular CLI使用一行代码快速添加...通俗的来说,声明周期函数就是组件创建,组件更新,组件销毁是会触发的一系列方法。...ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。 在第一轮 ngOnChanges() 完成之后调用,只调用一次。...ngAfterContentChecked() 每当 Angular 完成被投影组件内容的变更检测之后调用。...ngOnDestroy() 每当 Angular 每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器,以防内存泄漏。 在 Angular 销毁指令/组件之前调用。

4K20
  • AngularDart 4.0 高级-生命周期钩子 顶

    ngOnInit 在Angular首次显示数据绑定属性并设置指令/组件的输入属性后,初始化指令/组件。 在第一次ngOnChanges之后调用一次。...OnChanges 看看每次组件输入属性发生变化时,Angular如何用变更对象调用ngOnChanges钩子。 显示如何解释更改对象。...peek-a-boo存在以显示Angular如何按预期顺序调用钩子。 此快照反映用户单击“创建...”按钮然后单击“销毁...”按钮后日志的状态。 ?...ngOnInit是组件获取其初始数据的好地方。 教程和HTTP章节显示了如何。 还要记住,指令的数据绑定输入属性在构建之后才会设置。 如果您需要根据这些属性初始化指令,那么这是一个问题。...OnDestroy 将清理逻辑放入ngOnDestroy中,在Angular销毁指令之前必须运行的逻辑。 这是通知应用程序的另一部分组件将要销毁的时间。 这是释放资源的地方,不会自动收集垃圾。

    6.2K10

    Angular Elements 及其工作原理

    现在,Angular Elements 这个项目已经在社区引起一定程度的讨论。...Angular Elements 提供一种更简洁、对开发者更友善、更快乐地开发动态组件的方式 —— 在幕后它基于同样的机制(指创建动态组件),但隐藏了许多样板代码。...在文章的后续章节,我们将演示如何使用 Angular 组件的 @Input 装饰器与 这个 name 属性保持同步。...顺便,关于如何动态构造 Angular 组件可以通过阅读Dynamic Components in Angular这篇文章进行了解。它其中阐述的运作机制和我们这里使用的一模一样。...input 的值 // 在本例中,在 Angular Element 被加载之前,user 可能已经设置了元素的属性 // 这些值被保存在 initialInputValues 这个

    2.4K20

    Angular学习笔记(一)

    组件 组件负责控制视图,通过一些由属性和方法组成的 API 与视图交互。 模板 模板以 HTML 形式存在,告诉 Angular 如何渲染组件。 元数据 元数据告诉 Angular 如何处理一个类。...数据绑定 Angular 支持数据绑定,一种让模板的各部分与组件的各部分相互合作的机制。 往模板 HTML 中添加绑定标记,来告诉 Angular 如何把二者联系起来。...指令 Angular 模板是动态的。当 Angular 渲染它们时,它会根据指令提供的操作对 DOM 进行转换。 服务 服务是一个广义范畴,包括:值、函数,或应用所需的特性。...ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。 在第一轮 ngOnChanges() 完成之后调用,只调用一次。...只适合组件。 ngOnDestroy 在 Angular 销毁指令/组件之前调用。

    3.3K20

    Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

    @angular/core会创建组件,渲染它,创建并呈现它的后代。当@angular/core的数据绑定属性更改时,处理就会更改,在从DOM中删除其模板之前,就会销毁掉它。...ngOnDestroy:在Angular销毁指令/组件之前清除。取消订阅可观察的对象并脱离事件处理程序,以避免内存泄漏。...这通常用在setter中,当类中的值被更改完成时。 可以通过模块的任何一个组件,使用订阅方法来实现事件发射的订阅。...其中一些是: 避免为你的组件使用/注入动态HTML内容。 如果使用外部HTML,也就是来自数据库或应用程序之外的地方,那么就需要清理它。 不要将外部网址放在应用程序中,除非它是受信任的。...如何优化Angular 2应用程序来获得更好的性能? 优化取决于应用程序的类型和大小以及许多其他因素。但一般来说,在优化Angular 2应用程序时,我会考虑以下几点: 考虑AOT编译。

    17.4K80

    AngularDart4.0 指南-体系结构概述 顶

    创建,更新和销毁组件如同用户在应用程序中行走。...自定义组件与原生HTML在相同的布局中无缝混合。 元数据 ? 元数据告诉Angular如何处理一个类。 回顾HeroListComponent的代码,你可以看到它只是一个类。...数据绑定在模板及其组件之间的通信中起着重要的作用。 数据绑定对于父组件和子组件之间的通信也很重要。 指令 ? Angular模板是动态的。...如果请求的服务实例不在容器中,那么在将服务返回给Angular之前,注入器将创建一个并将其添加到容器中。 当所有请求的服务已经解析并返回时,Angular可以用这些服务作为参数调用组件的构造函数。...Lifecycle hooks:通过实现生命周期钩子接口,触及组件生命周期中的关键时刻,从创建到销毁。 Pipes:通过转换显示值来改善用户体验。

    7.9K30

    angular面试题及答案_angular面试

    ngOninit:初始化指令或组件,在angular第一次显示展示组件的绑定属性后调用,该方法只会调用一次 ngDocheck:检测 ngAfterContentInit:当把内容投影进组件之后调用,...在angular每次销毁组件或指令之前调用,通常用于移除事件监听,退订可观察对象。...当类被初始化之后,构造函数会被调用 ngOnInit ngOnInit 是angular中OnInit钩子的实现,用来初始化组件。...ngOnInit : 在angular 第一次显示数据绑定和设置指令、组件的输入属性之后,初始化指令、组件 所以从angular的生命周期看,constructor是执行在先的 所以既然ngOnchanges...如何优化Angular 2应用程序来获得更好的性能? 1)考虑AOT编译。 2)确保应用程序已经经过了捆绑,uglify和tree shaking。

    11.3K120

    2021vue经典面试题_vue面试题大全

    created(创建后) 完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来。 beforeMount(载入前) 在挂载开始之前被调用,相关的render函数首次被调用。...beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。 destroyed(销毁后) 在实例销毁之后调用。 调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。...(5)说说vue的动态组件。 多个组件通过同一个挂载点进行组件的切换,is的值是哪个组件的名称,那么页面就会显示哪个组件。...(6)keep-alive内置组件的作用 可以让当前组件或者路由不经历创建和销毁,而是进行缓存,凡是被keep-alive组件包裹的组件,除了第一次以外。不会经历创建和销毁阶段的。...path 参数不会显示在路径上 浏览器强制刷新参数会被清空 (2)使用Query: 参数会显示在路径上,刷新不会被清空 name 可以使用path路径 21、不用Vuex

    2.1K10

    AngularDart4.0 指南- 依赖注入 顶

    它的唯一目的是显示显示英雄名字列表的HeroListComponent。 HeroListComponent的这个版本从mockHeroes获取它的英雄,这是一个在单独文件中定义的内存集合。...组件提供的服务具有有限的生命周期。 组件的每个新实例都会去获得它所包含的服务实例,当组件实例被销毁时,服务实例也被销毁。...组件注入器是相互独立的,每个组件都创建它自己的组件提供服务的实例。 当Angular销毁这些组件之一的实例时,它也会销毁该组件的注入器和注入器的服务实例。...这是没有必要的,因为HeroesComponent已经被标记了@Component,并且这个标注类(像@Directive和@Pipe,稍后你会学到)是Injectable的子类型。...HeroService不会直接访问用户信息来决定谁被授权,谁不授权。 相反,HeroService构造函数需要一个布尔标志来控制秘密英雄的显示。

    5.7K20

    angular基础面试题_java web面试题

    }) 在 Angular 中有三种类型的指令: 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令...在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用 ngOnInit: 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。...,在ngDoCheck之后 ngAfterContentChecked:每当 Angular 检查完被投影到组件或指令中的内容之后调用,在ngAfter...之后调用 ngAfterViewInit:当...ngOnDestroy:当 Angular 每次销毁指令/组件之前调用并清扫....就像任何其他客户端或Web应用程序一样,Angular 2应用程序也应该遵循一些基本准则来减轻安全风险。其中一些是: 避免为你的组件使用/注入动态HTML内容。

    13K50

    AngularDart4.0 高级-属性(Attribute)指令 顶

    在“结构指令”页面中了解它们。 属性指令被用作元素的属性。 例如,“模板语法”页面中的内置NgStyle指令可以同时更改多个元素样式。 属性指令有两种: 基于类:一个全功能的属性指令,使用类实现。...当然,你可以用标准的JavaScript访问DOM,并手动添加事件监听器。 这种方法至少有三个问题: 你必须正确的写下监听器。 当指令被销毁时,代码必须分离监听器以避免内存泄漏。...通过@Input数据绑定将值传入指令 目前,高亮颜色在指令中被硬编码。 这是不灵活的。 在本节中,您将为开发人员提供在应用指令时设置突出显示颜色的能力。...'red'); 当您已经绑定到myHighlight属性名称时,如何绑定到第二个属性? 与组件一样,您可以根据需要添加尽可能多的指令属性绑定,方法是在模板中将它们串起来。 ...没有@Input,Angular拒绝绑定到属性。 您之前已将模板HTML绑定到组件属性,并且从未使用@Input。 有什么不同? 差别是一个信任的问题。 Angular将组件的模板视为属于组件。

    3.2K10

    Angular2 之 结构型指令几个概念

    隐藏元素的利弊 当我们隐藏元素时,组件的行为还在继续。 它仍然附加子啊它所属于的DOM元素上,它仍然在监听事件。angular会继续检查哪些能影响数据绑定的变更。...组件原本要做的哪些事情仍然在进行!它还是占用着那么多的资源。 另外一方面,重新显示这个组件会很快。 组件以前的状态被保留着,并随时可以显示。...angular会从DOM中移除该元素,停止相关组件的变更检测,把它从DOM事件中移除,并且销毁组件。组件会被垃圾回收,并释放内存。...总结 基于上面的利弊分析,无论是我们在使用内置的指令还是使用自定的指令的时候,我们应该自己分析提添加、移除元素以及创建和销毁组件的后果。... 这时候显示的内容是'Hip! Hooray!',在Angular的控制下,DOM的效果是不同的。 ?

    3K20

    2020vue面试题及答案_人际关系面试题及答案

    在 components 目录新建组件文件 在需要用到的页面import中导入 使用component注册 在 template 视图中使用组件标签 17、Vue如何实现按需加载配合webpack设置...对原生应用的支持不同: React Native为iOS和Android开发原生应用;Angular的NativeScript已被原生应用所采用,特别是Ionic框架已经被广泛地运用在制作混合应用等方面...,进而实现显示或隐藏元素,v-show通过设置dom元素的display来实现显示或隐藏的操作,并不会删除dom v-if隐藏会将组件销毁,显示时会将其内部的监听事件重建,v-show只是设置display...36、keep-alive 的作用是什么? 包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。 37、vue-loader 是什么?用途有哪些?...38、如何获取dom 在我们的vue项⽬中,难免会因为引⽤第三⽅库⽽需要操作DOM标签,vue为我们提供了ref属性。 ref 被⽤来给元素或⼦组件注册引⽤信息。

    8.7K20

    Angular-内存溢出的问题

    本项目用的是angular6搭建,用动态组件的形式来显示页面,之前遇到过因为内存溢出而导致无法aot的问题, Angular4以上的该方法都适用 解决方法:手动改写内存上限 修改目录: my-project..._@angular_compiler-cli@4.0.1@@angular\compiler-cli\src\main.js" %* ) 至于到底是什么原因导致的内存溢出,还不清楚,只是有如下猜测: 1...)文件过多; 2)订阅数据没有销毁占用内存,(看了下订阅的数据很少,应该不是的); 3)因为所有的组件都在一个根目录下(上面说了,用的动态组件没用路由),导致需要编译的组件过多?...暂时还不清楚只能先用设置内存上限的方法来解决,有大神的话望不吝指教; 还有一个问题就是用动态组件的方式,组件都在根目录下,会导致首次加载的时间过长。...有奇思妙想请告诉我,哈哈 同时package的时候也需要修改打包时候的内存 package.json { "name": "pms", "version": "0.0.0", "scripts

    2.4K20

    Angular 从入坑到挖坑 - 组件食用指南

    一、Overview angular 入坑记录的笔记第二篇,介绍组件中的相关概念,以及如何在 angular 中通过使用组件来完成系统功能的实现 对应官方文档地址: 显示数据 模板语法 用户输入 组件之间的交互...,可以通过 angular 内置的模板语法与 html 元素进行结合,从而告诉 angular 如何根据我们的应用逻辑和数据来渲染页面 4.1.2.1、插值表达式 插值表达式可以将组件中的属性值或者是模板上的数据通过模板表达式运算符进行计算...,当值为 false 时,则这些元素会从 dom 中被销毁,并且所有监听该 dom 元素的事件会被取消,当重新显示该元素时,会重新执行初始化的过程 与销毁元素不同,对于隐藏的元素来说,所有的元素监听事件还会执行监听的...五、组件的生命周期钩子函数 当 angular 在创建、更新、销毁组件时都会触发组件的生命周期钩子函数,通过在组件中实现这些生命周期函数,从而介入到这些关键时刻 钩子函数 触发时机 ngOnChanges...一般用来对视图的 dom 元素进行操作 ngAfterViewChecked 视图发生变化时调用,在组件的生命周期中会调用多次 ngOnDestroy 只在销毁组件时调用一次,一般用来在组件销毁前执行某些操作

    15.8K30

    Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目

    前言:   最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善。...通俗的来说,声明周期函数就是组件创建,组件更新,组件销毁是会触发的一系列方法。...ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。 在第一轮 ngOnChanges() 完成之后调用,只调用一次。...ngAfterContentChecked() 每当 Angular 完成被投影组件内容的变更检测之后调用。...ngOnDestroy() 每当 Angular 每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器,以防内存泄漏。 在 Angular 销毁指令/组件之前调用。

    2.8K20

    AngularDart 4.0 高级-结构指令 顶

    但它确实解释了它们是如何工作的以及如何编写自己的结构指示。 指令拼写 在本指南中,您将看到UpperCamelCase和lowerCamelCase拼写的指令。 你已经看到了NgIf和ngIf。...还有其他两种Angular指令,在其他地方被广泛描述:(1)组件和(2)属性指令。 组件以本地HTML元素的方式管理HTML区域。 从技术上讲,这是一个模板指令。...当条件为false时,NgIf从DOM中删除它的宿主元素,将它从DOM事件(它所依附的)中分离出来,将组件从Angular变化检测中分离出来并销毁它。 组件和DOM节点可以被垃圾收集并释放内存。...从积极的方面来说,再次显示元素很快。 该组件的以前的状态被保存并准备显示。 该组件不会重新初始化 - 这种操作可能很昂贵。 所以隐藏和展示有时候是正确的。...在应用结构指令之前,您可能想暂停一下,以考虑添加和删除元素以及创建和销毁组件的后果。 星号(*)前缀 当然,你注意到了指令名称的星号(*)前缀,并想知道为什么它是必要的以及它做了什么。

    16.1K20
    领券