templateref html内容,Angular中TemplateRef，ViewContainerRef

一、TemplateRef

官网解释

我们先来了解一下 HTML 模板元素 - 。模板元素是一种机制，允许包含加载页面时不渲染，但又可以随后通过 JavaScript 进行实例化的客户端内容。我们可以将模板视作为存储在页面上稍后使用的一小段内容。

ng v4以来不推荐使用。请 改用。

image.png

如上所示，因为模板元素的机制，模板元素中的内容，如果没有进行处理对用户来说是不可见的

image.png

从上图中，我们发现 页面中定义的 模板元素，渲染后被替换成 comment 元素，其内容为 "template bindings={}" 。此外我们通过 @ViewChild 获取的模板元素，是 TemplateRef_ 类的实例，接下来我们来研究一下 TemplateRef_ 类：

TemplateRef_

// @angular/core/src/linker/template_ref.d.ts

export declare class TemplateRef_ extends TemplateRef {

private _parentView;

private _nodeIndex;

private _nativeElement;

constructor(_parentView: AppView, _nodeIndex: number, _nativeElement: any);

createEmbeddedView(context: C): EmbeddedViewRef;

elementRef: ElementRef;

}

TemplateRef

// @angular/core/src/linker/template_ref.d.ts

// 用于表示内嵌的template模板，能够用于创建内嵌视图(Embedded Views)

export declare abstract class TemplateRef {

elementRef: ElementRef;

abstract createEmbeddedView(context: C): EmbeddedViewRef;

}

那么如果显示模板中定义的内容呢？如官网所说，使用ViewContainerRef

image.png

可以包含宿主视图(当用 createComponent() 方法实例化组件时创建)和内嵌视图(当用 createEmbeddedView()方法实例化 [TemplateRef](https://angular.cn/api/core/TemplateRef) 时创建)。

视图容器的实例还可以包含其它视图容器，以创建层次化视图。

就是你需要内嵌模板中的视图实例化，你就要使用ViewContainerRef类的`createComponent()方法

image.png

上述代码成功运行我们可以看到

image.png

现在我们来总结一下 TemplateRef 与 ViewContainerRef。

TemplateRef：用于表示内嵌的 template 模板元素，通过 TemplateRef 实例，我们可以方便创建内嵌视图(Embedded Views)，且可以轻松地访问到通过 ElementRef 封装后的 nativeElement。需要注意的是组件视图中的 template 模板元素，经过渲染后会被替换成 comment 元素。

ViewContainerRef：用于表示一个视图容器，可添加一个或多个视图。通过 ViewContainerRef 实例，我们可以基于 TemplateRef 实例创建内嵌视图，并能指定内嵌视图的插入位置，也可以方便对视图容器中已有的视图进行管理。简而言之，ViewContainerRef 的主要作用是创建和管理内嵌视图或组件视图。

问题：

Angular 2 Component 组件中定义的 模板元素为什么渲染后会被移除 ？

因为 模板元素，已经被 Angular 2 解析并封装成 TemplateRef 实例，通过 TemplateRef 实例，我们可以方便地创建内嵌视图(Embedded View)，我们不需要像开篇中的例子那样，手动操作 模板元素

整理总结理解或者借鉴过程中可能有所偏差，后期有新的认知会改动