IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> ng-template 使用过程中默认参数不能按照期望工作的问题单步调试 -> 正文阅读

[JavaScript知识库]ng-template 使用过程中默认参数不能按照期望工作的问题单步调试

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

问题描述

我使用如下代码进行 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 文件里下面三个元素:

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-03-06 12:53:24  更:2022-03-06 12:54:23 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 9:09:47-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码