首页
学习
活动
专区
工具
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()方法来确保组件被正确销毁。

这是一个基本的示例,你可以根据自己的需求进行修改和扩展。关于Angular 8的更多信息,你可以参考Angular官方文档

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

相关·内容

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

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

38551

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

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

3.9K20

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

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

6.1K10

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

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

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

17.3K80

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。

10.9K120

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.6K20

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

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.3K20

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

components 目录新建组件文件 需要用到页面import中导入 使用component注册 template 视图中使用组件标签 17、Vue如何实现按需加载配合webpack设置...对原生应用支持不同: React Native为iOS和Android开发原生应用;AngularNativeScript已被原生应用所采用,特别是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入门,开发环境搭建,使用Angular CLI创建你第一个Angular项目

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

2.7K20

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

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

15.8K30
领券