乐趣区

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

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

退出移动版