关于nginx-module:ngtemplate-使用过程中默认参数不能按照期望工作的问题单步调试

4次阅读

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

本文波及到的代码,位于这个 Github 仓库:https://github.com/wangzixi-d…

问题形容

我应用如下代码进行 ng-template 模板的参数传递:

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

这里对于上图的代码地位 2,我用关键字 let-,定义了一个仅模板里可能拜访的局部变量 name,其数据源来自传入该模板的上下文对象 context 的同名属性 name

而对于代码地位 1 处的 param,我没有指定其映射到上下文对象中的属性名,因而我冀望它应用上下文对象里的默认 同名 属性,因而最初第一个 div 元素里应该显示属性 param 的值:默认值

然而理论的执行后果却是,第一个 div 元素显示的值为空:

问题剖析

这个问题的本源是如何将上下文对象里的某个属性作为 默认 属性,传递给模板。

在 Angular 官网里找到了这样的对于默认值的文档:

上下文对象的精确含意:

附加到 EmbeddedViewRef 的上下文对象。这应该是一个 JSON 对象,该对象的键将可用于本地模板 let 申明的绑定。在上下文对象中应用键 $implicit 会将其值设置为默认值。

文档提到,默认属性应该用 $implicit 来标识。

咱们在源代码里依据关键字 $implicit 搜寻,找到了常量 IMPLICIT_REFERENCE,再依据该常量搜寻,就能找到 Angular 框架源代码解析 $implicit 之处:

这里咱们就能找到 Angular 解析 template variable 的逻辑:

InterpolationConfig 的 start 和 end 符号:{{, }}

解决方案

将下图图例 1 地位处的 param 批改成 $implicit 即可:

总结

从上面这个调用栈里还能察看到模板里蕴含的 HTML 元素,在内存中对应的 DOM 节点:

ng-template, ng-container 和 br,别离对应 HTML 文件里上面三个元素:

正文完
 0