likes
comments
collection
share

ng-template 使用过程中参数传递错误的单步调试

作者站长头像
站长
· 阅读数 38

本文涉及到的代码,位于这个 Github 仓库:https://github.com/wangzixi-d...

问题描述

我使用如下代码,期望在使用 *ngTemplateOutlet 指令动态创建 template 实例时,能够进行参数传递

<ng-template #inputTemplateWithContent let-param let-name="name">
    <div>参数1: {{param}}</div>
    <div>参数2: {{name}}</div>
</ng-template>

<ng-container *ngTemplateOutlet="inputTemplateWithContent; context: myContext"></ng-container>
<br>

ng-template 使用过程中参数传递错误的单步调试

传递的参数 myContext 定义在 Component class 里:ng-template 使用过程中参数传递错误的单步调试

问题在于,运行时第一个 div 元素里,显示的值是空的:

ng-template 使用过程中参数传递错误的单步调试

问题分析

我们还是采取单步调试的方式来查找问题:ng-template 使用过程中参数传递错误的单步调试

因为 ng-template 并不会直接出现在最终渲染的 HTML 代码里,而是将其内部包裹的 HTML 原生标签,使用浏览器原生的 native API appendChild,动态插入到 DOM 树中。如下图所示:

ng-template 使用过程中参数传递错误的单步调试

comment 元素采取 createComment 方法创建:ng-template 使用过程中参数传递错误的单步调试

node_value 是 container,这也是最后在 Chrome 开发者工具 elements 标签页里观察到的 containerng-template 使用过程中参数传递错误的单步调试

ng-template 使用过程中参数传递错误的单步调试

动态创建了 div 元素:ng-template 使用过程中参数传递错误的单步调试

这个 div 元素目前还是空的:ng-template 使用过程中参数传递错误的单步调试

也就是 ng-template 里被包裹的元素:ng-template 使用过程中参数传递错误的单步调试

上述代码被执行后,我们在 Chrome 开发者工具里看到了一个空的 div 标签:ng-template 使用过程中参数传递错误的单步调试

同理,第二个 div 标签也生成了:ng-template 使用过程中参数传递错误的单步调试

我们可以使用一个小技巧:将 myContext 替换成一个 get 函数,这样我们就可以在 get 函数里设置断点进行调试,从而找到 template 上下文参数传递的准确代码位置了。ng-template 使用过程中参数传递错误的单步调试

图中高亮的上下文栈帧,直接跳转到了我们编写的 get 函数:

ng-template 使用过程中参数传递错误的单步调试

如图:ng-template 使用过程中参数传递错误的单步调试

解决方案

将模板变量参数传递修改为如下代码:

<ng-template #inputTemplateWithContent let-param11="param" let-name="name">
    <div>参数1: {{param11}}</div>
    <div>参数2: {{name}}</div>
</ng-template>

ng-template 使用过程中参数传递错误的单步调试

注意,我们使用关键字 let-param11,定义了一个新的仅仅能在该模板内部使用的临时变量param11.