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

Angular 9使用viewContainerRef加载动态组件得到未定义的结果

可能是由于以下几个原因导致的:

  1. 组件未正确引入:在使用viewContainerRef加载动态组件之前,需要确保该组件已经正确地引入到当前的模块中。可以通过在模块文件中的imports数组中添加组件的引用来解决此问题。
  2. 组件未正确声明:在使用viewContainerRef加载动态组件之前,需要在当前模块或组件的declarations数组中声明该组件。确保在使用之前已经正确地声明了该组件。
  3. 组件未正确注册:在使用viewContainerRef加载动态组件之前,需要在当前模块或组件的entryComponents数组中注册该组件。这是因为动态加载组件需要在编译时进行组件的解析和编译,而不是在模板中静态地引用。通过将组件添加到entryComponents数组中,可以告诉Angular编译器该组件可能会被动态加载。
  4. 组件未正确创建:在使用viewContainerRef加载动态组件之前,需要确保正确地创建了该组件的实例。可以使用ComponentFactoryResolver来创建组件实例,并将其插入到viewContainerRef中。
  5. 组件的依赖未正确注入:如果动态加载的组件依赖于其他服务或组件,需要确保这些依赖项已经正确地注入到组件中。可以使用Angular的依赖注入机制来解决此问题。

如果以上步骤都正确执行,但仍然得到未定义的结果,可能是由于其他代码逻辑或配置问题导致的。可以通过调试代码、查看错误日志或与社区进行交流来进一步排查和解决问题。

对于Angular 9中使用viewContainerRef加载动态组件的更多信息和示例,可以参考腾讯云的相关文档和示例代码:

请注意,以上答案仅供参考,具体解决方法可能因实际情况而异。

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

相关·内容

Angular DOM 抽象概述

模板元素是一种机制,允许包含加载页面时不渲染,但又可以随后通过 JavaScript 进行实例化的客户端内容。我们可以将模板视作为存储在页面上稍后使用的一小段内容。...Angular 没有什么神奇之处,如果你想要插入新的组件或元素,你需要告诉 Angular 在哪里插入新的元素。...动态创建组件的流程如下: 获取装载动态组件的容器 在组件类的构造函数中,注入 ComponentFactoryResolver 对象 调用 ComponentFactoryResolver 对象的 resolveComponentFactory...() 方法创建 ComponentFactory 对象 调用组件容器对象的 createComponent() 方法创建组件并自动添加动态组件到组件容器中 基于返回的 ComponentRef 组件实例...,配置组件相关属性 (可选) 在模块 Metadata 对象的 entryComponents 属性中添加动态组件 declarations - 用于指定属于该模块的指令和管道列表。

3.5K30
  • Angular 6.x 指令快速入门

    阅读须知 本系列教程的开发环境及开发语言: Angular 6.x Angular CLI TypeScript 基础知识 Angular CLI 基本使用 安装 Angular CLI (可选) $...指令简介 Angular 的指令分为三种: 组件(Component):用于构建UI组件,继承于 Directive 类 属性指令(Attribute Directive):用于改变组件的外观或行为...结构指令(Structural Directive):用于动态添加或删除 DOM 元素来改变 DOM 布局 Angular 组件组成图 ?...在 Angular 中,我们可以通过 ViewChild 装饰器来获取视图中定义的模板元素,然后利用 ViewContainerRef 对象的 createEmbeddedView() 方法,创建内嵌视图...}; } 第七节 - 使用 ngComponentOutlet 指令 ngComponentOutlet 的作用 该指令用于使用声明式的语法,动态加载组件。

    3.2K40

    ionic3应该善用组件和指令

    在angular1时代,组件和指令是一回事,即严格来说,没有组件这概念,只有指令,而到了angular2时代,虽说组件仍是一种特殊的指令,但已经有一定目的明显区分开来,分别用Directive和Component...来标识,用cli生成命令就如下所示: ionic g directive 指令名 ionic g component 组件名 要说指令和组件的区别,简单说是不带视图和带视图的区别,直观效果是:一个为原有标签动态添加功能...TemplateRef用来访问组件的模板,而ViewContainerRef可作为视图内容渲染器,将模板内容插入至DOM中。 组件 这个不必说了,我们用得最多的便是组件。...Renderer来代替ElementRef使用,有兴趣的可以自行了解下Renderer 3)使用指令 如果调用的页面用了懒加载,在调用指令的页面module.ts里导入指令并声明,反之,在app.module.ts...为实现该指令,要借用TemplateRef和ViewContainerRef,TemplateRef用来访问组件的模板,而ViewContainerRef可作为视图内容渲染器,将模板内容插入至DOM中。

    3.5K40

    Angular中,模块加载的几种方法 原

    依赖:主项目必须包含各子模块的源码! 二、动态(懒)加载 参照:angular-elements-dashboard  项目。 在anuglar.json中,配置懒加载的模块路径: ?...之后,在被动态加载的模块中,用public属性ComponentList,从模块对象上暴露出来所有的组件类。...现在动态模块已经加载到主的AppModule中来了,如果要动态添加动态模块内的组件,就和普通的动态添加组件的技术一致了:  用ViewContainerRef 的一个变量来创建一个组件createComponent...然后它可以构建为APF(Angular Package Formattor)格式的包,发布到npm 供别人使用,也可以在当前项目中被引用。...一行代码未写,就构建了一个组件,Angular还是很强大的。 我们再加一行代码引用这个myLib模块: ? ? 通过结果,可以看到它们是打包到一个文件中的。

    2.9K20

    【Angular教程】组件动效u002F动态组件u002F视图封装模式

    正文: 组件动效 Angular默认的动画模块使用的事Web Animations规范,需要注意兼容问题。...前面两篇涉及到的组件都是通过标签的形式来使用的,当然也是使用频率最多的一种方式,但在Angular中还给我们提供了另外一种组件的使用方式,通过ts代码来动态组合组件 动态的组件也需要我们在父组件中提供一块区域...: ViewContainerRef; 定义我们实际需要挂载进来的组件,HW组件我们临时创建一个用来演示 hwComp!...来对加载的组件做操作了, 使用完组件后一定记得hwComp.destroy()进行销毁 视图封视图封装模式 视图封装模式 通过改变组件装饰器的encapsulation属性可以单独控制每个组件的封装模式...,模式的特点是接受全局样式的影像,但不影响其他组件样式 None: 样式会加载到全局,无作用域,无法达到隔了的效果,容易发生意外情况。

    91940

    ElementRef & TemplateRef & ViewContainerRef

    template本身是HTML的标签,用于保存客户端的内容机制,该内容在页面渲染时不被加载,但是可以在运行时被javascript解析,详情可以看 Template HTML TemplateRef...// @angular/core/src/linker/template_ref.d.ts // 用于表示内嵌的template模板,能够用于创建内嵌视(EmbeddedViews)...,每个实例都具有createEmbeddedView方法 ViewContainerRef import { Component, TemplateRef, ViewChild, ViewContainerRef...需要注意的是组件视图中的 template 模板元素,经过渲染后会被替换成 comment 元素。 ViewContainerRef:用于表示一个视图容器,可添加一个或多个视图。...简而言之,ViewContainerRef 的主要作用是创建和管理内嵌视图或组件视图。

    1.2K20

    Angular2 之 结构型指令几个概念

    Angular 有一个强力的模板引擎,它能让你轻松维护元素的DOM树结构。 Angular指令可分为三种 组件 属性型指令 结构型指令 组件 组件其实就是一个带模板的指令。...angular会从DOM中移除该元素,停止相关组件的变更检测,把它从DOM事件中移除,并且销毁组件。组件会被垃圾回收,并释放内存。...弊 如果我们很快再次使用这个组件的时候,重建组件的代价是非常大的。 当ngIf重新变成true的时候,angular会重新创建该组件及其子树。angular会重新运行每个组件的初始化逻辑。...总结 基于上面的利弊分析,无论是我们在使用内置的指令还是使用自定的指令的时候,我们应该自己分析提添加、移除元素以及创建和销毁组件的后果。...import { Directive, Input } from '@angular/core'; import { TemplateRef, ViewContainerRef } from '@angular

    3K20

    Ionic3 自定义指令

    在 Angular 中有三种类型的指令 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。...组件的概念比较大,本文讲解的是属性指令和结构指令的创建和使用,Angular官方文档 创建属性指令 创建一个指令可以直接使用ionic cli 工具 ionic g directive sxylight...:当鼠标悬浮到使用该指令的元素上时,元素的背景色发生变化。...背景色的颜色可由父组件传入。...selector: '[sxylight]' 是该指令在外部使用时的名称 @Input 表示一个输入属性,表示可以从父组件传值进来 @HostListener 可用于监听事件 ElementRef 可以

    1.3K30

    浅谈Angular

    ng-show本质上设置元素的display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上的从DOM结构中移除 *ngFor--动态创建DOM结构 ngSwitch--通过匹配case...可以给@Input装饰器内部填写一个元数据,这个值是外部使用的名字 内部还是使用原来的名字 3.如果想要给指令添加的元素绑定的事件,需要使用@HostListener装饰器 如果要通过指令控制DOM的显隐...,需要在指令内部获取到宿主元素和承载宿主元素的容器,通过依赖注入templateRef和ViewContainerRef服务 4.管道:pipe 作用:对数据进行处理(删除,插入,过滤,拼接等)...--2.路径参数传值,直接把要传递的参数写到routerLink的对应的值数组里,需要对路由配置做设置--> 9',3000]">商品展示... 参数订阅(RxJS) 遇到的问题:数据不会及时更新,原因:组件的ngOnInit方法只会在其被创建时走一次,如果该组件不销毁,init方法不会再走,导致当前数据无法更新 解决办法

    4.4K10

    AngularDart 4.0 高级-结构指令 顶

    还有其他两种Angular指令,在其他地方被广泛描述:(1)组件和(2)属性指令。 组件以本地HTML元素的方式管理HTML区域。 从技术上讲,这是一个模板指令。...当条件为false时,NgIf从DOM中删除它的宿主元素,将它从DOM事件(它所依附的)中分离出来,将组件从Angular变化检测中分离出来并销毁它。 组件和DOM节点可以被垃圾收集并释放内存。...Angular不断检查可能会影响数据绑定的更改。 无论组件在做什么,它都会继续这样做。 虽然看不见,但组件及其所有后代组件都会占用资源。 性能和记忆负担可能很大,响应性可能会降低,用户什么也看不到。...变量的作用域限于重复模板的单个实例。 您可以在其他结构指令的定义中再次使用相同的变量名称。 您通过在#(#var)前缀加上变量名称来声明一个模板引用变量。 引用变量是指其附加的元素,组件或指令。...TemplateRef和ViewContainerRef 像这样一个简单的结构指令从Angular生成的中创建一个嵌入式视图,并将该视图插入与指令的原始宿主元素相邻的视图容器中

    16.1K20

    Angular ViewChild和ViewChildren

    ViewChild Angular 为我们提供 ViewChild 和 ViewChildren 装饰器来获取模板视图中匹配的元素。ViewChild 是属性装饰器,用来从模板视图中获取匹配的元素。...现在我们先来更新一下 AuthFormComponent 组件(关于它的出身,可以浏览 “Angular 内容投影” 这篇文章),即把下面的消息提示封装为组件。...以上代码成功运行后,页面能够看到期望的结果。...该装饰器用来从模板视图中获取匹配的多个元素,返回的结果是一个 QueryList 集合。...但在实际项目中,我们是不推荐直接使用 DOM API 执行 DOM 操作的,我们要尽量减少应用层与渲染层之间强耦合关系,从而让我们应用能够灵活地运行在不同环境。

    2.7K20

    Angular开发实践(七): 跨平台操作DOM及渲染器Renderer2

    在《Angular开发实践(六):服务端渲染》这篇文章的最后,我们也提到了在服务端渲染中需要牢记的几件事件,其中就包括不要使用window、 document、 navigator等浏览器特有的类型以及直接操作...通过合适的方法,使用 Angular 构建的应用,可复用在多种不同平台的应用上 —— Web、移动 Web、移动应用、原生应用和桌面原生应用。...此外还定义了以下引用类型:ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。..., 'background-color', 'red'); // 通过Renderer2设置div的css样式background-color } } 获取组件中的div 在Angular应用中不应该通过原生...操作组件中的div 在上面通过几种方式获取到 div 的 DOM 对象,那么我们要如果对它进行操作呢(设置样式、属性、插入子元素等)?通过原始API 或者 jQuery 肯定是不允许的了。

    2.6K90

    Angular v8 发布!来看看有什么新功能

    在一切正常的前提下,能够得到明显更小的 bundles 应该就足够了。...要在调试模式下运行程序,建议使用 AOT: 1ng serve --aot 此外,值得一提的是通过 ng build 创建的程序的大小。等到 Angular 9 发布时 Ivy 最终应该会默认激活。...如果同一文件夹包含具有公共文件扩展名 .component.ts 的同名组件,则 CLI 甚至会使用与 Web worker 通信的代码对其进行丰富。...虽然它们在早期版本中被用于组件请求不在结构指令内的元素,如 ngIf 或 ngFor,但查询结果已在 ngOnInit 中可用。...有关如何使用 $location 替换的详细描述(用于更好地交织两个框架)可以在这里找到。此外,你现在可以找到延迟加载 AngularJS 的想法,它基于前面提到的动态 ECMAScript 导入。

    3K30

    Angular ElementRef 简介

    此外还定义了以下引用类型:ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。...this.elementRef.nativeElement.querySelector('div'); console.dir(divEle); } } 运行上面代码,在控制台中没有出现异常,但是输出的结果却是...[2] 这个演讲的示例。 问题解决了,但感觉不是很优雅 ?有没有更好的方案,答案是肯定的。Angular 不是有提供组件生命周期的钩子,我们可以选择一个合适的时机,然后获取我们想要的 div 元素。...不过我们后面也会有专门的文章,详细分析一下 Angular 组件的生命周期。成功取到 div 元素,就剩下的事情就好办了,直接通过 style 对象设置元素的背景颜色。...具体使用示例如下: import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core'; @Component

    1.7K60

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

    Angular 2中的路由工作原理是什么? 路由是能够让用户在视图/组件之间导航的机制。Angular 2简化了路由,并提供了在模块级(延迟加载)下配置和定义的灵活性。 ...扩展阅读: https://www.codeproject.com/Articles/1164813/Angular-Routing  https://vsavkin.com/angular-2-router-d9e30599f9ea...在Angular2中,组件中发生的任何改变总是从当前组件传播到其所有子组件中。如果一个子组件的更改需要反映到其父组件的层次结构中,我们可以通过使用事件发射器api来发出事件。...其中一些是: 避免为你的组件使用/注入动态HTML内容。 如果使用外部HTML,也就是来自数据库或应用程序之外的地方,那么就需要清理它。 不要将外部网址放在应用程序中,除非它是受信任的。...感兴趣的同学,可以尝试构建一个“答题系统应用程序”,具体要求为: 有三个组成部分:测试视图、审查结果和显示结果 接受json格式的提问问题,你可以以预定义的格式从服务器发送json,Angular2测试应用需要在客户端呈现出答题界面

    17.4K80

    Vuejs和其他前端框架的对比

    React可以使用Create React App (CRA),而Vue对应的则是vue-cli。两个工具都能让你得到一个根据最佳实践设置的项目模板。 由于CRA有很多选项,使用起来会稍微麻烦一点。...HTML模板去进行渲染,使用相似于Angular风格的方法去输出动态的内容。...除此以外,Angular2还有一些小功能比如检验模板的类型安全(即,模板里能在编译器保证没有引用model未定义的变量),不过AoT本身似乎还没有稳定,所以不能算优势。...相比之下,Vue 的单文件组件允许你非常容易的使用 ES2015 和你想用的 CSS 预编译处理器。 在部署生产环境时,Polymer 建议使用 HTML Imports 加载所有资源。...而在这方面,Vue 可以结合异步组件的特性和 Webpack 的代码分割特性来实现懒加载 (lazy-loaded)。这同时确保了对旧浏览器的兼容且又能更快加载。

    3.8K110

    基于requirejs和angular搭建spa应用1、常规实现2、引入Requirejs

    ,用户体验并不友好,基于此,我们有几种方式来实现,1、基于requirejs来做,这也是本章内容要讲的部分;2、使用webpack分块打包,实现按需加载,后期看时间会加入对应的文章;3、使用oclazyload...使用RequireJS加载模块化脚本将提高代码的加载速度和质量,实现的是AMD规范,当然类似的还有CMD规范的实现框架seajs。   ...Requirejs中,简单的说一个文件一个模块,即是单文件模块,所以对模块的加载其实本质上是对文件的加载。   假设读者已经了解requirejs的基本使用方式。   ...上一节中,讲到了提了一下controller的注册方式,其中说到了动态注册,当然除了controller之外,还有service、directive等都可以实现动态注册,这也是我们实现按需加载的基础,现在对我们的项目做一下修改...; 8 } 9 }) 最后修改修改index.html中脚本引入方式,以及去掉ng-app指令启动方式,angular应用启动已在main.js中通过domready后使用脚本启动。 <!

    1.5K30
    领券