一、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> 模板元素
整理总结理解或者借鉴过程中可能有所偏差，后期有新的认知会改动
网友评论