当前位置: 首页 > 后端技术 > Node.js

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

时间:2023-04-03 12:15:44 Node.js

本文涉及的代码位于这个Github仓库:https://github.com/wangzixi-d...问题描述我使用的是下面的代码,期望在使用*ngTemplateOutlet指令动态创建模板实例时,可以传递参数:

Parameter1:{{param}}
参数二:{{name}}
br>传递的参数myContext定义在Component类李:问题是运行时第一个div元素显示的值为空:问题分析我们还是采用单步调试的方式找到问题:因为ng-template不会直接出现在最终渲染的HTML代码中,而是使用浏览器的原生APIappendChild将包裹在里面的HTML原生标签动态插入到DOM树中。如下图:comment元素是通过createComment方法创建的:node_value是容器,是在Chrome开发者工具的elements选项卡中观察到的最后一个容器:div元素是动态创建的:div元素是当前empty:也就是ng-wrappedelementsinthetemplate:上面的代码执行完后,我们在Chrome开发者工具中看到了一个空的div标签:同样的,第二个div标签也生成了:我们可以使用一个小技巧:putmyContext将其换成一个get函数,这样我们就可以在get函数中设置断点进行调试,从而找到模板上下文参数传递的确切代码位置。图中高亮的上下文栈帧直接跳转到了我们写的get函数:如图:解决方案将模板变量参数传递给如下代码:
参数一:{{param11}}
参数二:{{name}}
注意我们使用关键字let-param11,定义了一个新的临时变量param11,它只能在这个模板内部使用。