一、TemplateRef

官网解释

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

ng v4以来不推荐使用<template>。请<ng-template> 改用。

image.png

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

image.png

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

TemplateRef_

// @angular/core/src/linker/template_ref.d.ts
export declare class TemplateRef_<C> extends TemplateRef<C> {
 private _parentView;
 private _nodeIndex;
 private _nativeElement;
 constructor(_parentView: AppView<any>, _nodeIndex: number, _nativeElement: any);
 createEmbeddedView(context: C): EmbeddedViewRef<C>;
 elementRef: ElementRef;
}

TemplateRef

// @angular/core/src/linker/template_ref.d.ts
// 用于表示内嵌的template模板，能够用于创建内嵌视图(Embedded Views)
export declare abstract class TemplateRef<C> {
 elementRef: ElementRef;
 abstract createEmbeddedView(context: C): EmbeddedViewRef<C>;
}

那么如果显示模板中定义的内容呢？如官网所说，使用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 组件中定义的 <template> 模板元素为什么渲染后会被移除 ？

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