位置: 编程技术 - 正文

angular之ng-template模板加载

编辑:rootadmin

推荐整理分享angular之ng-template模板加载,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

本文介绍了angular之ng-template模板加载,分享给大家,具体如下:

html5中的template

template标签的含义:HTML <template>元素是一种用于保存客户端内容的机制,该内容在页面加载时是不可见的,但可以在运行时使用JavaScript进行实例化,可以将一个模板视为正在被存储以供随后在文档中使用的一个内容片段。

属性

此元素仅包含全局属性和只读的 content 属性,通过content 可以读取模板内容,而且可以通过判断 content 属性是否存在来判断浏览器是否支持 <template> 元素。

示例

html

js

代码运行后,结果将是一个包含(由 JavaScript 生成)两个新行的 HTML 表格:

注释掉 tb[0].appendChild(clone);和tb[0].appendChild(clone2);,运行代码,只会看到:UPC_Code Product_Name

说明template元素中的内容如果不经过处理,浏览器是不会渲染的。

angular中的ng-template

<ng-template>是一个 Angular 元素,它永远不会直接显示出来。在渲染视图之前,Angular 会把<ng-template>及其内容替换为一个注释。

以ngIf为例:

angular之ng-template模板加载

<ng-template> 模板元素与html5的template元素一样,需要被特殊处理后才能渲染。ng主要是通过类TemplateRef和ViewContainerRef实现的。

通过阅读ngIf源码学习如何运用<ng-template>

在使用ngIf 指令时我们并未发现ng-template的身影,这是因为"*"(星号)语法糖的原因,这个简写方法是一个微语法,而不是通常的模板表达式, Angular会解开这个语法糖,变成一个<ng-template>标记,包裹着宿主元素及其子元素。

会被解析为

看下ngIf源码

ngIf的源码并不难,它的核心就在于_updateView函数,它主要通过ViewContainerRef的createEmbeddedView和clear方法来实现模板TemplateRef的呈现和清除(先不关注当中的then和else等的具体实现)。它使用TemplateRef取得<ng-template>的内容,并通过ViewContainerRef来访问这个视图容器。

TemplateRef

TemplateRef 实例用于表示模板对象,TemplateRef 抽象类的定义如下:

在指令中通过依赖注入TemplateRef可以直接拿到ng-tempalte的TemplateRef,但是在component组件中我们则需要使用viewChild

ViewContainerRef

ViewContainerRef 实例提供了 createEmbeddedView() 方法,该方法接收 TemplateRef 对象作为参数,并将模板中的内容作为容器 (comment 元素) 的兄弟元素,插入到页面中。

createEmbeddedView:context

创建Template 自身 Context 的属性,以ngFor为例:查看ngFor Context源码:

从例子中可以看到,通过let-i let-odd可以获取到Template的context,这是angular提供的一种语法。因为在 Angular中是没有作用域继承的,所以在模版中无法隐式实现两个无关数据源。一个简单的实现方案就是:一个显式、一个隐式。由于ng-template tag 是写在某个 Component 的 template属性中的,所以在 ng-template tag 之下的部分当然能访问的也只有 Component 作为 Context 提供的属性,从而保持行为的一致性,而如果需要访问到 Template 的 Context,我们就需要使用额外的引入语法。比如 let-i="index",就是把 Template Context 中的 index属性引入到当前的 Component Context 中并赋予别名 i,这样,我们就能够使用 i 这个标识符来访问到 Template Context 中的属性了,并且仍然保持了行为的一致性和作用域的独立性。

模板输入变量是这样一种变量,你可以在单个实例的模板中引用它的值。 这个例子中有好几个模板输入变量:hero、i和odd。 它们都是用let作为前导关键字。

模板输入变量和模板引用变量是不同的,无论是在语义上还是语法上。

我们使用let关键字(如let hero)在模板中声明一个模板输入变量。 这个变量的范围被限制在所重复模板的单一实例上。而声明模板引用变量使用的是给变量名加#前缀的方式(#var)。 一个引用变量引用的是它所附着到的元素、组件或指令。它可以在整个模板任意位置**访问。

模板输入变量和引用变量具有各自独立的命名空间。let hero中的hero和#hero中的hero并不是同一个变量。

总结:

<ng-template>在ng中主要通过viewChild TemplateRef ViewContainerRef来实现结构性操作。

标签: angular之ng-template模板加载

本文链接地址:https://www.jiuchutong.com/biancheng/369763.html 转载请保留说明!

上一篇:使用ef6创建oracle数据库的实体模型遇到的问题及解决方案(oracle创建emp表)

下一篇:js定时器+简单的动画效果实例(js定时器的两种方法)

  • 企业所得税汇算清缴退税怎么做账
  • 企业所得税税款可以税前扣除吗
  • 中了单位大奖要缴个税吗?
  • 一般计税方法适用于500万
  • 财务费用和应付利息怎么算
  • 进料加工出口退税政策
  • 支付货代运费账务处理
  • 土地出让价款
  • 税率开错情况说明
  • 企业自建固定资产
  • 年折旧额怎么计算公式直线法
  • 残疾人就业保障金怎么计算
  • 发票先收到下个月才付款
  • 每个月计提工资没有发怎么办
  • 企业房产税如何申报缴纳
  • 购销合同印花税优惠政策
  • 小规模时取得的专票在一般纳锐人之后可以抵扣吗
  • 房租增值税专用发票和普通发票的税率
  • 航天信息服务费的会计分录
  • 小规模开税票怎么开
  • 租金一次性付清的账务处理
  • 无形资产摊销方法应当反映其经济利益
  • 应付职工薪酬明细表怎么填写
  • 考勤扣款怎么算
  • 向非绑定账户转账超限是什么意思
  • 公积金贷款额度查询计算器
  • register.exe - register进程有什么用.是什么意思
  • php echo \n
  • 盈余公积转增资本会计科目
  • vue批量上传图片至oss
  • 黑暗的树荫
  • framework core
  • lvm命令详解
  • 承租人经营租赁账务处理
  • 配电箱安装方法
  • 逾期未收回包装物押金会计分录
  • 小规模纳税人季度不超30万怎么做账
  • 金税盘怎样设置收款人复核人
  • 固定资产一次性扣除如何做账
  • 织梦系统网站搭建教程
  • 小规模教育培训怎样纳税
  • 企业应付账款的借方登记
  • 暂估成本跨年后收到票可以直接附在暂估凭证
  • 计提工会经费会计凭证怎么做分录
  • 应付劳务费怎么做账
  • 税控服务费如何入账
  • 公司租赁办公场所,没发票怎么办
  • 劳动保护费进什么科目
  • 应收账款周转率计算公式
  • 年末增值税有留底,挂在哪个科目
  • 开个人普票需要身份证吗
  • 购货方付款会计分录
  • 施工单位月末都需要结转什么
  • 非金融企业间借款利息开票税率
  • mysql %d
  • mysql数据库如何使用
  • 怎么怎么恢复
  • Win10系统怎么删除管理员权限
  • xp系统如何打印文件
  • imac固态
  • win10相机桌面快捷方式
  • ubuntu命令联网
  • ubuntu on xorg
  • 小米4刷windows 10
  • win7系统如何创建新用户
  • rnbrcache.exe是什么意思
  • linux命令光标移动到末尾
  • Linux中的host命令应用实例详解
  • unity连接
  • Jquery通过ajax请求NodeJS返回json数据实例
  • python处理文本文件代码优化
  • JavaScript焦点事件、鼠标事件和滚轮事件使用详解
  • jquery动态设置css
  • 卷式发票如何查验真伪
  • 车辆退款
  • 广州车船税每年交多少
  • 水费不用交吗
  • 税务机关纳税检讨书范文
  • 房屋租赁管理部门制发的《房屋租赁证》
  • 江西省国家税务局网站
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设