位置: 编程技术 - 正文

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

  • 收到股东投资款怎么做账
  • 双定户经营所得用申报吗
  • 银联撤销交易步骤
  • 收付实现制有应收应付吗
  • 资产负债表的累计折旧期末数怎么填
  • 税务局买税盘
  • 工资3700扣多少社保钱
  • 预提利息收入纳税调整
  • 独立核算自负盈亏和统负盈亏怎么选
  • 生产中材料的合理损耗核算
  • 销售回扣分录
  • 公司取出的备用金怎么打税
  • 发给一个人的说说
  • 银行手续费要纳进去吗
  • 违约金收入计入应纳税所得额吗
  • 对公账户每个月
  • 土地使用权出让金
  • 设备升级改造如何开发票
  • 企业微信收入也要交税吗
  • 投资活动净现金流为负说明什么
  • 增值税增量留抵退税政策解读
  • 小规模纳税人计税方法
  • 固定资产折旧计算方法
  • 账务和申报表不一致
  • 苹果11怎么充不上电了
  • php怎么自学
  • 政府的奖励金计入哪个科目
  • 发放职工工资计入什么会计科目
  • ireike.exe - ireike是什么进程 有什么作用
  • 白兰花的养殖方法和注意事项和病虫害
  • thinkphp框架流程原理
  • php改编码
  • 企业的生产成本等于
  • 企业所得税汇算表
  • 在申报季度企业所得税时,残疾人工资可以加计扣除吗
  • 个体工商户筹集资金的难易程度
  • 用友的应付单和付款单的区别各是什么时候填制
  • 资产负债表利润表和现金流量表
  • 境外企业在境内投资是否备案
  • 利润表的本月数怎么算
  • 航天金税盘维护费什么时候交
  • 财务费用为负的意思
  • 小企业机械作业指导书
  • 图书为什么不能退货
  • 银行存款存款单丢了怎么办
  • 企业网银证书年费是什么
  • python requests检测响应状态码
  • python skewness
  • 甲企业持有乙企业股票的市价为920000
  • 个体户需要
  • 企业福利费账务处理
  • 发票票种核定发票种类怎么选
  • 对外投资需要股东会决议吗
  • 给员工租房怎么才能避开风险
  • 补开以前年度发票
  • 计提工资申报个税
  • 商业承兑过期后可以退回吗
  • 企业零申报要报哪些税
  • 高新企业研发项目规定几个
  • 一次性付款的优势
  • 出纳的现金日记账表格怎么做
  • 如何办icp许可证
  • sqlserver 获取字符位置
  • xp系统删除密码
  • 苹果macOS 14 正式发布
  • u深度u盘启动盘制作工具无法进入电脑
  • 用户请愿地址曝露怎么办
  • 苹果官网
  • win7怎么查看系统位数
  • js代码执行顺序简单介绍
  • js移动元素位置
  • Node.js中的全局对象有
  • linux shell脚本攻略(第3版)
  • jquery 修改
  • 个人总结的几个方面
  • 普票怎么入账标识
  • 四川国税发票真伪查询
  • 亚马逊网上商城
  • 用于直接销售消费品的消费税计入
  • 越南入关要给小费吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设