Angular TemplateRef

人在老家 發表於 2019-6-11 14:45:00

H5之template元素
　　模版元素是 Web Components 技术中的一种。
　　里面的元素在页面加载时不会呈现，在随后的JS实例化时可以呈现。
<div class="cnblogs_code">
<pre><template id="tpl">
<span>so good </span>
</template>

<div id="container">
</div>

<script type="text/javascript">
const container = document.getElementById('container');
const tpl = document.getElementById('tpl');
let tplNode = document.importNode(tpl.content,true);
container.appendChild(tplNode);
</script></pre>
</div>
　　   template 的类型是 HTMLTemplateElement.
　　   模版元素在 HTMLTemplateElement.content 中，类型是 DocumentFragment，在浏览器渲染出来的结果如下：
<div class="cnblogs_code">
<pre><template id="tpl">
#document-fragment
<span>so good </span>
</template></pre>
</div>
　　      DocumentFragment 表示一个没有父级文件的最小文档对象，常常被作为一个轻量版的Document使用。
　　　　是DOM节点，不是真实DOM树的一部分。在DOM树中，文档片段被其所有子元素代替。
　　      因为文档片段存在内存中，不存在DOM树中，将元素插入文档片段时，不会引起回流。
 
Angular 之视图类型
　　　 Angular 支持的 View 视图类型：
　　　　1、Embeded Views - Template 模版元素
　　　　2、Host View是 --Componet 组件
 
Angular 之 TemplateRef　　　　
　　内嵌template模板元素，通过TemplateRef实例，可以通过ElementRef 封装后的nativeElement。
<div class="cnblogs_code">
<pre><ng-template #tpl>
<span>I am span in template {{title}}</span>
</ng-template>

@ViewChild('tpl')
tpl: TemplateRef<any>;

title:string = 'jack';

ngAfterViewInit() {
const embeddedView = this.tpl.createEmbeddedView(null); // 创建内嵌视图

const commentElement = this.tpl.elementRef.nativeElement; // 模版DOM元素，此时被渲染成了 comment元素
 　　// 遍历内嵌视图中的rootNodes, 动态插入 node 
embeddedView.rootNodes.forEach( (node) => {
commentElement.parentNode.insertBefore(node, commentElement.nextSibling);
});
}</pre>
</div>
　   <img src="https://img2018.cnblogs.com/blog/338235/201906/338235-20190606142036768-634274930.png" alt="" width="554" height="249">
　　 　<img src="https://img2018.cnblogs.com/blog/338235/201906/338235-20190606144628608-1772071606.png" alt="" width="485">
　　由上图可得知如下结论：
　　　　1、<ng-template>元素渲染后被替换成 comment元素。
　　　　2、通过@ViewChild获取的模版元素 this.tpl，是 TemplateRef_ 类的实例。
　　　　    其中 TemplateRef_<C>  extends  TemplateRef<C> 。
　　     3、内嵌视图是 ViewRef_ 对象，其rootNodes属性包含了<template>模版中的内容。
　　　  4、EmbeddedViewRef<C> extends ViewRef 。
 
Angular 之 ViewContainerRef
　　　　上述方法渲染数据，似乎只能渲染静态文本，而 {{title}} 值却没有渲染出来。
　　　　这时候就需要 ViewContainerRef。
　　　　ViewContainerRef：视图容器，用于创建和管理内嵌视图或组件视图。
　　　　　　　　　　　　　  可添加一个或多个基于TemplateRef实例创建内嵌视图，指定内嵌视图的插入位置。
<div class="cnblogs_code">
<pre><ng-template #tpl1>
<span>我是第一个模版</span>
</ng-template>

<ng-template #tpl2>
<span>我是第二个模版</span>
</ng-template>

@ViewChild('tpl1')
tpl1: ElementRef<any>;

@ViewChild('tpl2')
tpl2: ElementRef<any>;

@ViewChild('tpl1', { read: ViewContainerRef } )
tplContainer: ViewContainerRef;

ngAfterViewInit() {
const view1 = this.tpl1.createEmbeddedView(null);
const view2 = this.tpl2.createEmbeddedView(null);
this.tplContainer.insert(view1);
this.tplContainer.insert(view2);
}</pre>
</div>
 
　　　　　　 
来源：https://www.cnblogs.com/xianrongbin/p/9686389.html

頁: [1]

琼殿技术论坛's Archiver

Angular TemplateRef