本文介绍了angular之ng-template模板加载,分享给大家,具体如下:
html5中的template
template标签的含义:HTML 元素是一种用于保存客户端内容的机制,该内容在页面加载时是不可见的,但可以在运行时使用JavaScript进行实例化,可以将一个模板视为正在被存储以供随后在文档中使用的一个内容片段。
属性
此元素仅包含全局属性和只读的 content 属性,通过content 可以读取模板内容,而且可以通过判断 content 属性是否存在来判断浏览器是否支持 元素。
示例
html
<tr>
<td class="record"></td>
<td></td>
</tr>
js
// 使用现有的HTML tbody实例化表和该行与模板
let t = document.querySelector('#productrow'),td = t.content.querySelectorAll("td");
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
// 克隆新行并将其插入表中
let tb = document.getElementsByTagName("tbody");
let clone = document.importNode(t.content,true);
tb[0].appendChild(clone);
// 创建一个新行
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans";
// 克隆新行并将其插入表中
let clone2 = document.importNode(t.content,true);
tb[0].appendChild(clone2);
代码运行后,结果将是一个包含(由 JavaScript 生成)两个新行的 HTML 表格:
注释掉 tb[0].appendChild(clone);和tb[0].appendChild(clone2);,运行代码,只会看到: UPC_Code Product_Name
说明template元素中的内容如果不经过处理,浏览器是不会渲染的。
angular中的ng-template
以ngIf为例:
通过阅读ngIf源码学习如何运用
在使用ngIf 指令时我们并未发现ng-template的身影,这是因为"*"(星号)语法糖的原因,这个简写方法是一个微语法,而不是通常的模板表达式, Angular会解开这个语法糖,变成一个