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

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

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

2022/11/11 更新

注：前提知识

Angular官方并没有给出 simpleChange 的用法

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

 
@Directive({
  selector: '[fuckIf]'
})
export class FuckStructureDirective{
  constructor(private container:ViewContainerRef, private temple:TemplateRef<Object>) {
    @Input("fuckIf") expressionResult:boolean;
    
    ngOnchanges(changes:{ [property:string]:SimpleChange })
        {
            let change = changes ["expressionResult"];// 看看清楚啊 change和changes
            if (!change.isFirstChange() && !change.currentValue)
            {
                this.container.clear();
            } 
            else if (change.currentValue)
            {
                this.container.createEmbeddedView(this.template)    
            }       
        }    
 
  }
}

解释一下这段代码：

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

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

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

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

那么：

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

temple:TemplateRef