TemplateRef
TemplateRef 实例用于表示模板对象，TemplateRef 抽象类的定义如下：
abstract get elementRef(): ElementRef; abstract createEmbeddedView(context: C): EmbeddedViewRef<C>; }
在指令中通过依赖注入TemplateRef可以直接拿到ng-tempalte的TemplateRef，但是在component组件中我们则需要使用viewChild
<ng-template #tptest>
<span>template test</span>
</ng-template>
@ViewChild('tptest') tptest: TemplateRef<any>;
ViewContainerRef
ViewContainerRef 实例提供了 createEmbeddedView() 方法，该方法接收 TemplateRef 对象作为参数，并将模板中的内容作为容器 (comment 元素) 的兄弟元素，插入到页面中。
export abstract class ViewContainerRef {
/*基于TemplateRef对象创建Embedded View(内嵌视图)，然后根据`index`指定的值，插入到容器中。
如果没有指定`index`的值，新创建的视图将作为容器中的最后一个视图插入。*/
abstract createEmbeddedView<C>(
templateRef: TemplateRef<C>, //内嵌视图
context?: C, index?: number): // 创建上下文
EmbeddedViewRef<C>;
}
createEmbeddedView：context
创建Template 自身 Context 的属性，以ngFor为例：
查看ngFor Context源码：
export class NgForOfContext<T> {
constructor(
public $implicit: T, public ngForOf: NgIterable<T>, public index: number,
public count: number) {}
get first(): boolean { return this.index === 0; }
get last(): boolean { return this.index === this.count - 1; }
get even(): boolean { return this.index % 2 === 0; }
get odd(): boolean { return !this.even; }
}
<div *ngFor="let hero of heroes; let i=index; let odd=odd">
({{i}}) {{hero.name}}
</div>
解析后：
<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" >
<div>({{i}}) {{hero.name}}</div>
</ng-template>
从例子中可以看到，通过let-i let-odd可以获取到Template的context，这是angular提供的一种语法。因为在 Angular中是没有作用域继承的，所以在模版中无法隐式实现两个无关数据源。一个简单的实现方案就是：一个显式、一个隐式。由于ng-template tag 是写在某个 Component 的 template属性中的，所以在 ng-template tag 之下的部分当然能访问的也只有 Component 作为 Context 提供的属性，从而保持行为的一致性，而如果需要访问到 Template 的 Context，我们就需要使用额外的引入语法。比如 let-i="index"，就是把 Template Context 中的 index属性引入到当前的 Component Context 中并赋予别名 i，这样，我们就能够使用 i 这个标识符来访问到 Template Context 中的属性了，并且仍然保持了行为的一致性和作用域的独立性。