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

JerryWang_汪子熙 - 2022-07-12 14:59:47

本文涉及到的代码，位于这个 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>

传递的参数 myContext 定义在 Component class 里：

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

问题分析

我们还是采取单步调试的方式来查找问题：

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

comment 元素采取 createComment 方法创建：

node_value 是 container，这也是最后在 Chrome 开发者工具 elements 标签页里观察到的 container：

动态创建了 div 元素：

这个 div 元素目前还是空的：

也就是 ng-template 里被包裹的元素：

上述代码被执行后，我们在 Chrome 开发者工具里看到了一个空的 div 标签：

同理，第二个 div 标签也生成了：

我们可以使用一个小技巧：将 myContext 替换成一个 get 函数，这样我们就可以在 get 函数里设置断点进行调试，从而找到 template 上下文参数传递的准确代码位置了。

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

如图：

解决方案

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

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