Angular动态组件ViewChildren始终为undefined
创始人
2024-10-24 15:01:11
0

问题描述: 在Angular中使用ViewChildren获取动态组件时,始终返回undefined。

解决方法:

  1. 确保动态组件已经正确地被添加到父组件中。 例如,在父组件的模板中使用ng-container和ngTemplateOutlet来动态加载组件:

    
    
    

    确保在动态加载组件之前,已经将动态组件添加到dynamicComponent模板中。

  2. 使用AfterViewInit生命周期钩子来获取动态组件。 在父组件中,实现AfterViewInit接口,并在ngAfterViewInit方法中获取动态组件。

    import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
    import { DynamicComponent } from './dynamic.component';
    
    @Component({
      selector: 'app-parent',
      template: `
        
        
      `
    })
    export class ParentComponent implements AfterViewInit {
      @ViewChildren(DynamicComponent) dynamicComponents: QueryList;
    
      ngAfterViewInit() {
        console.log(this.dynamicComponents); // 获取到动态组件的QueryList
      }
    }
    
  3. 如果动态组件是通过ngIf或ngFor条件渲染的,请确保在获取动态组件之前,动态组件已经被渲染到DOM中。 这可以通过使用setTimeout来延迟获取动态组件,以确保组件已经被渲染到DOM中。

    import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
    import { DynamicComponent } from './dynamic.component';
    
    @Component({
      selector: 'app-parent',
      template: `
        
    ` }) export class ParentComponent implements AfterViewInit { @ViewChildren(DynamicComponent) dynamicComponents: QueryList; showComponent = true; ngAfterViewInit() { setTimeout(() => { console.log(this.dynamicComponents); // 获取到动态组件的QueryList }); } }

通过以上方法,您应该能够成功获取到动态组件的QueryList,并进行后续的操作。

相关内容

热门资讯

传授透视"wepok... 传授透视"wepoker有没有挂"开挂(透视)辅助工具(玩家交流可靠教程)传授透视"wepoker有...
第四分钟透视!欢乐掌心辅助,微... 您好:微乐陕西三代自建房挂这款游戏可以开挂的,确实是有挂的,很多玩家在这款游戏中打牌都会发现很多用户...
发现透视"WePok... 发现透视"WePoker透视挂怎么用"开挂(透视)辅助神器(热点推荐wpk教程)《发现透视"WePo...
五分钟透视!时光互娱房卡辅助,... 【亲,时光互娱房卡辅助 这款游戏可以开挂的,确实是有挂的,很多玩家在这款时光互娱房卡辅助中打牌都会发...
科技透视"WePoK... 科技透视"WePoKer到底有透视挂吗"开挂(透视)辅助脚本(最新研发黑科技教程)科技透视"WePo...
3分钟开挂!雀神广东插件智能解... 雀神广东插件智能解码是一款可以让一直输的玩家,快速成为一个“必胜”的ai辅助神器,有需要的用户可以加...
一分钟辅助!雀友会广东潮汕苹果... 雀友会广东潮汕苹果开挂 无需打开直接搜索微信:136704302本司针对手游进行,选择我们的四大理由...
关于透视"手机微扑克... 关于透视"手机微扑克辅助器"开挂(透视)辅助神器(解密关于安装教程)关于透视"手机微扑克辅助器"开挂...
7分钟辅助!功夫川辅助,越乡游... 7分钟辅助!功夫川辅助,越乡游义乌辅助(揭秘攻略开挂辅助工具);打开点击测试直接进入微信(13670...
必看透视"wepok... 必看透视"wepoker微透视挂方法"开挂(透视)辅助平台(玩家必备教程必胜教程)必看透视"wepo...