位置: 编程技术 - 正文

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定时器的两种方法)

  • 进项税转出从待认证到月末结转的会计分录是
  • 税务账是什么意思
  • 计提工会经费的科目
  • 未开票收入退回可以冲税吗
  • 处置固定资产亏了怎么做账
  • 太阳能发电开票编码
  • 公司申请破产后股东需要还债吗
  • 足浴按摩开票明细一栏写什么
  • 所有者权益变动表是什么报表
  • 个人独资企业政策性搬迁
  • 总公司向子公司收取管理费如何纳税
  • 股票交易印花税税率
  • 购进库存商品溢余账务处理怎么做?
  • 2018年所得税率
  • 建筑业暂估成本表
  • 增值税纳税申报表怎么填
  • 同一控制下企业合并会产生商誉吗
  • 一般纳税人怎么交税
  • 独资企业个人所得税汇算清缴
  • 劳保用品增值税税率是多少
  • 自产产品公益性捐赠可以免征增值税吗
  • 委托加工物资的消费税
  • 冲销凭证怎么记账
  • 税法种类及税率
  • 金税三期上线后的税收征管问题
  • 汽车厂家金融贴息 是贴利息的还是贴车价
  • 去年收入少做了怎么调账
  • 经营性支出包括哪些
  • 公司的贷款过桥怎么办
  • php面向对象详解
  • 当年盈余资金计算公式
  • 什么情况下可以领取失业保险金
  • 黄金旧料卖出收据怎么写
  • 圣诞精灵什么意思
  • 暂估增值税可以抵扣吗
  • php soap wsdl
  • PHP jQuery+Ajax结合写批量删除功能
  • thinkphp ide
  • 普通纳税人怎么交税
  • 基于Java+SpringBoot+vue+element驾校管理系统设计和实现
  • 织梦专题页模板
  • 核定征收的方式包括
  • 5年前开的发票退货可以冲红吗?
  • 厂房建设包括哪些
  • 富文本word
  • 普通增值发票可以抵扣进项税吗
  • 经济利益的总流入
  • 公司买15万的车可以抵扣多少税
  • 航空电子客票行程单是发票吗
  • 进口关税的计算是以什么为基础
  • 交易性金融资产属于流动资产
  • 建筑企业印花税应税凭证名称
  • 长期应付款的会计编号
  • 不带息银行汇票
  • 公司破产账务处理
  • 接待客户的旅游活动
  • 认缴制不会带来的账务问题
  • 关于幼儿园的会议内容
  • 未发货先开发票
  • 税控盘开具发票怎么冲红?
  • 会计可以用收据做账吗
  • 单位车辆保险费
  • 个人独资企业核定征收取消了吗
  • 会计凭证数字书写模板
  • 总账会计的岗位目的
  • 营业外收入属于借方还是贷方
  • 让64位的Windows Server 2008支持蓝牙的方法
  • ktpcntr.exe
  • win10预览版最新
  • win+tab键
  • cmd指令让电脑乱码
  • linux网卡添加vlan
  • unity3d跑酷游戏推荐
  • 厦门翔安到同安有多远
  • javascript HTML+CSS实现经典橙色导航菜单
  • python函数参数的传递方法
  • 苏州相城便民中心电话
  • 消费税的纳税义务的发生时间是如何规定的
  • 广东省税务局登录
  • 小额贷款公司在职人员和离职人员情节哪种轻
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设