位置: 编程技术 - 正文

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

  • 递延所得税资产和负债怎么理解
  • 税务师考试科目搭配
  • 跨年度进项税额转出怎么申报
  • 金税四期查到了怎么办
  • 什么企业不用交社保
  • 厂房设计费计入在建工程吗
  • 本期应补退税额怎么算
  • 六种无形资产有什么
  • 新公司筹建期要做账吗
  • 签合同前的费用由谁承担
  • 以前年度损益科目核算业务
  • 支付一次性劳务报酬怎么做账
  • 技术转让成本包括什么
  • 纳税人转登记期限
  • 对于子女继承父母的评价
  • 库存现金余额过大的定性
  • 政府往来账
  • 主营业务收入包括哪些内容
  • 购买的员工福利需要缴纳印花税
  • 原材料购入和转出做账
  • 厂家核销费用直接抵扣
  • 固定资产作为实收资本报废怎么处理
  • 农业公司没发票可以入账吗
  • 企业销售货物后,若发生销货退回或销售折让
  • 多缴的增值税能退吗
  • 孵化器 怎么赚钱
  • 固定资产捐赠的增值税
  • 子公司向母公司借款
  • 企业所得税投资收益纳税调整
  • 开启共享文件夹
  • 怎么查看当前刷新率
  • 建筑施工企业是落实施工现场带班制度的第一责任人
  • nuxt支持vue3吗
  • php get post
  • 冷门暴利行业
  • 怎么查发票的真假鉴定
  • 装修费用当月摊还是次月摊销
  • 企业固定资产可以按照其价值和使用情况,确定采用某一
  • vue route 参数
  • bcdboot命令怎么用
  • 分公司和总公司的账务处理
  • php网站漏洞
  • html元素一般分为哪几类
  • 新成立的小公司财务怎么管理
  • 中小企业发展专项资金亮点 免申即享
  • 水利基金申报表在哪找
  • 一般纳税人不开票收入怎么做账
  • 发票上的货物要怎么填?
  • 电子商业承兑汇票的承兑有以下几种方式
  • 在建工程转出到什么科目
  • 土地违约金的法律规定
  • 土地使用税退税怎么做会计分录
  • 定额发票可以用于事业单位报销
  • 税收返还如何做账
  • 无票收入怎么报增值税申报表
  • mysql分页实现
  • sql server分组查询
  • sql server本地登录
  • 磁盘碎片 win7
  • win10屏幕显示
  • unix系统什么样子
  • win8系统桌面图标
  • 如何解决焦虑的心理
  • win8开始菜单全屏怎么调回去
  • win8操作系统
  • mfc界面布局
  • nodejs怎么在服务器运行
  • jqueryform表单提交
  • javascript中的splice
  • fragment里面如何嵌套fragment
  • 在谈到民族这个概念是我们一再指出
  • unity旋转角度范围限制
  • jsgenerator
  • 一般纳税人获得自产自销免税发票怎么处理
  • 更改国名
  • 本期应纳税额怎么算
  • 外省车险保单,有何不利的事
  • 四川医保增员网上怎么操作流程图
  • 苏州市国家税务局稽查局李加云副局长
  • 国税湖南电子税务局官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设