本文涉及到的代码，位于这个 Github 仓库：https://github.com/wangzixi-diablo/ngDynamic

问题描述

我使用如下代码，期望在使用 *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.

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

c语言调试过程中的错误,C语言调试过程中duplicate symbol错误分析
说明:在我们调试C语言的过程中,经常会遇到duplicate symbol错误(在Mac平台下利用Xcode集成开发环境).如下图: 一.简单分析一下C语言程序的开发步骤. 由上图我们可以看出C语言由 ...
计算机视觉：Bag of words算法实现过程中出现错误及解决方案
Bag of words算法实现过程中出现错误及解决方案出现的问题 IndexError: list index out of range OSError:x.sift not found sqli ...
已成功与服务器建立连接，但是在登录过程中发生错误。 (provider: SSL Provider, error: 0 - 接收到的消息异常，或格式不正确。)...
之前做好的asp.net部署后,发现访问数据库时: 异常:已捕获: "已成功与服务器建立连接,但是在登录过程中发生错误. (provider: SSL Provider, error: 0 ...
已成功与服务器建立连接，但是在登录过程中发生错误。 (provider: SSL Provider, error: 0 - 接收到的消息异常，或格式不正确。)
已成功与服务器建立连接,但是在登录过程中发生错误. (provider: SSL Provider, error: 0 - 接收到的消息异常,或格式不正确.) 参考文章: (1)已成功与服务器建立连接 ...
WSL(windows subsystem for linux)安装错误：安装过程中遇到错误，但可以继续安装。组件： ‘WSL 内核‘ 错误代码： 0x80072f78解决方法
文章目录问题来源解决参考问题来源使用管理员身份打开powershell,输入 wsl --install 之后等待安装: 结果,出现如下问题: PS C:\WINDOWS\system32& ...
linux存储库rep 61082,安装informatic过程中的错误
1.Check if the DISPLAY variable is set export DISPLAY=192.168.3.201:0.0 在注销用户并切换到oracle或者infa 用户,就可以 ...
SQL SEVER登录失败，无法连接服务器或已成功与服务器建立连接，但是在登录过程中发生错误。（Win10版本，SQL 2019）
一.首先无法登陆到服务器可以检查一下操作是否打开 1.点进服务器属性 2.然后点进安全性,看下服务器身份验证是SQL SEVER 和Windows身份验证模式,,以及登录审核是否是仅限失败的登录二. ...
SQL Server 2008 问题——已成功与服务器建立连接，但是在登录过程中发生错误。
登录报错:已成功与服务器建立连接,但是在登录过程中发生错误. (provider: 共享内存提供程序, error: 0 - 管道的另一端上无任何进程. 解决办法:先用windows模式登录上去,然后 ...
SQL Server（解决问题）已成功与服务器建立连接，但是在登录过程中发生错误
SQL Server(解决问题)已成功与服务器建立连接,但是在登录过程中发生错误 SQL Server(解决问题)已成功与服务器建立连接,但是在登录过程中发生错误.provider: Shared M ...

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

问题描述

问题分析

解决方案

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

最新文章

热门文章