关于javascript:ngtemplate-使用过程中参数传递错误的单步调试

31次阅读

共计 1031 个字符，预计需要花费 3 分钟才能阅读完成。

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

留神，咱们应用关键字 let-param11，定义了一个新的 仅仅能在该模板外部应用的长期变量，param11.

正文完