当前位置: 首页 > Web前端 > HTML5

ng-template在使用过程中,默认参数无法正常使用,单步调试

时间:2023-04-05 02:03:09 HTML5

本文涉及的代码位于这个Github仓库:https://github.com/wangzixi-d...我使用的问题描述如下代码传递ng的参数-template模板:

参数1:{{param}}
参数2:{{name}}
这里,对于上图中的代码位置2,我使用关键字let-定义了一个只能在模板中访问的局部变量名,其数据源来自于模板的属性与上下文对象上下文同名的名称。至于代码位置1的param,我没有指定映射到context对象的属性名,所以我希望它使用context对象中同名的默认属性,所以属性param的值应该是在第一个div元素中显示:Defaults。但是实际执行结果是第一个div元素显示的值为空:问题分析这个问题的根本原因是如何将context对象中的一个属性作为默认属性传递给模板。在Angular官网上找到了这么一篇关于默认值的文档:context对象的确切含义:依附于EmbeddedViewRef的context对象。这应该是一个JSON对象,其键可用于在本地模板let声明中进行绑定。在上下文对象中使用键$implicit会将其值设置为默认值。文档提到默认属性应该用$implicit标识。我们根据关键字$implicit查找源码,找到常量IMPLICIT_REFERENCE,然后根据常量查找,可以找到Angular框架源码解析$implicit的点:这里可以找到Angular的逻辑解析模板变量:InterpolationConfig起止符号:{{,}}解决方法将下图中图例1位置的param改为$implicit:总结从下面的调用栈中,也可以观察到其中包含的HTML元素模板,在内存中对应DOM节点:ng-template、ng-container和br,对应HTML文件中的如下三个元素: