手写ngIf，使用视图容器引用ViewContainerRef和模板引用TemplateRef

写这篇博客的原有：虽然Angular官网有提到指令的使用，以及相关Ref的使用，但是对相关Ref并没有做出详细的解释，也没有提供相关的详细文档。

明确 *ngIf 是一个结构型指令，需要  @Directive 修饰器

前提知识: Angular官方并没有给出 simpleChange 的用法

let change = changes ["expressionResult"]; 是获取到某个属性的change状态

解释一下这段代码：

ViewContainerRef 对象用于管理视图容器，是视图的[集合]。视图就是 包含指令，绑定，表达式的HTML元素区域。

视图的创建通过ViewContainerRef类提供的各种[API]来实现。如下图：

手写 *ngIf时候用到两个方法：

createEmbeddedView（）向用户显示 ng-temple 元素的内容，然后使用 clear( ) 来删除。

那么：

container:ViewContainerRef 代表 ng-temple元素在 HTML 文档中占用的地方

temple:TemplateRef 代表 ng-temple 元素的内容

注： changes:{[propKey:string]:SimpleChange}是什么？ 索引签名，用于限制对象属性类型 www.cnblogs.com/UmaruChan/p…

意思是 用 string 去索引,得到一个 SimpleChange类型对象;

此class会在初始化期间，调用 ngOnChanges方法，他接受SimpleChange 对象，根据表达式当前的值来判断是否显示当前的内容。

注： 前缀是Angular的简洁语法 星号（*）前缀
星号是一个用来简化更复杂语法的“语法糖”。 从内部实现来说，Angular 把 *ngIf 属性 翻译成一个 元素 并用它来包裹宿主元素，代码如下：

ngIf 指令

    <div *ngIf="hero" class="name">{{hero.name}}</div>    

等价于

    <ng-template [ngIf]="hero">
     <div class="name">{{hero.name}}</div>
     </ng-template>