0
点赞
收藏
分享

微信扫一扫

动态创建 @ViewChild 导致运行时错误的原因分析


本文讨论问题的代码,位于 Github:​​https://github.com/wangzixi-diablo/ngDynamic​​

问题描述

我的 Component 代码如下图所示:

动态创建 @ViewChild 导致运行时错误的原因分析_github


  1. 使用依赖注入,引入 ​​ViewContainerRef​​,从而可以使用其 ​​createEmbeddedView​​ 方法,在运行时动态创建实例。
  2. 使用 ​​@ViewChild​​,获得该 Component HTML 源代码里定义的 id 为 tpl 的模板实例,类型为 ​​TemplateRef​​。
  3. Component 的 HTML 源代码:

动态创建 @ViewChild 导致运行时错误的原因分析_选择器_02

<ng-template tpl>
<div>
Hello, ng-template!
</div>
</ng-template>

然而启动应用,出现运行时错误:

动态创建 @ViewChild 导致运行时错误的原因分析_html_03


ERROR TypeError: Cannot read properties of undefined (reading 'createEmbeddedView')
at ViewContainerRef.createEmbeddedView (core.js:10190:45)
at NgTemplateComponent.push.8YnP.NgTemplateComponent.ngAfterViewInit (ng-template.component.ts:20:20)
at callHook (core.js:3281:18)
at callHooks (core.js:3251:17)
at executeInitAndCheckHooks (core.js:3203:9)
at refreshView (core.js:7451:21)
at renderComponentOrTemplate (core.js:7494:9)
at tickRootContext (core.js:8701:9)
at detectChangesInRootView (core.js:8726:5)
at RootViewRef.detectChanges (core.js:9991:9)


问题分析

上述调用上下文里,有一个栈帧是我们应用程序的代码:


ngAfterViewInit (ng-template.component.ts:20:20)


在其方法内设置断点, 发现运行时,this.tplRef 为空。

动态创建 @ViewChild 导致运行时错误的原因分析_选择器_04

在值为 undefined 的变量上调用 ​​createEmbeddedView​​ 导致的这个错误。

动态创建 @ViewChild 导致运行时错误的原因分析_html_05

问题转化为:​​this.tplRef​​ 的赋值逻辑是怎样的?

在 ngOnInit 时,这个属性还是 undefined 状态:

动态创建 @ViewChild 导致运行时错误的原因分析_html_06

我们把鼠标 hover 在 ​​@ViewChild​​ 上查看其说明:


变更检测器会在视图的 DOM 中查找能匹配上该选择器的第一个元素或指令。 如果视图的 DOM 发生了变化,出现了匹配该选择器的新的子节点,该属性就会被更新。


发现输入参数是一个选择器,本例我传入的选择器是 id 选择器:​​tpl​

动态创建 @ViewChild 导致运行时错误的原因分析_html_07

根据 Angular 官网文档,这意味着我的 HTML 模板文件里,tpl 之前应该用 ​​#​​ 修饰:

动态创建 @ViewChild 导致运行时错误的原因分析_github_08

解决方案

在 tpl 前添加 ​​#​​:

动态创建 @ViewChild 导致运行时错误的原因分析_选择器_09

总结

如果我们想进一步观察 view query 是如何根据传入的选择器 ​​tpl​​,去 dom tree 里查找的节点,可以添加如下代码,即 @ViewChild 和 set 函数搭配使用的情况。

动态创建 @ViewChild 导致运行时错误的原因分析_选择器_10

@ViewChild('tpl')
set thisNamedoesnotMatter(v:TemplateRef<any>){
console.log('Jerry');
this.tplRef = v;
}

通过调试,发现 view query 的执行过程不会显示在 Chrome 开发者工具里,而仅仅显示一个 dummy 的 XXX(Component 名称)_Query 的调用上下文。

动态创建 @ViewChild 导致运行时错误的原因分析_html_11

set 函数里的输入参数 v 代表的就是 id 为 tpl 的 Template 实例。



举报

相关推荐

0 条评论