概述

ngIf计算表达式的值来渲染then模版或者else模版在它的位置。

• then模版为ngIf的内联模版，除非then绑定了值
• else模版为空值，除非绑定了值。

语法

ngIf

<div *ngIf="condition">...</div>`
<ng-template [ngIf]="condition"><div>...</div></ng-template>`

这种方式是最常用的，ngIf有条件的显示内联模版

ngIf else

<div *ngIf="condition; else elseBlock">...</div>
<ng-template #elseBlock>...</ng-template>

如果表达式的值为false时需要显示模版，那么就需要else模版绑定视图。注意，else指向elseBlock模版引用变量，模板可以在组件视图的任何地方定义，但是通常是在后面放置的，可读性强。

ngIf else then

<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>...</ng-template>
<ng-template #elseBlock>...</ng-template>

通常情况下，then模版就是ngIf的内联模版，但是then也可以像else一样指定模版引用变量。

NgIf源码解读

@Directive({selector: '[ngIf]'})
export class NgIf {
  private _context: NgIfContext = new NgIfContext();
  private _thenTemplateRef: TemplateRef<NgIfContext>|null = null;
  private _elseTemplateRef: TemplateRef<NgIfContext>|null = null;
  private _thenViewRef: EmbeddedViewRef<NgIfContext>|null = null;
  private _elseViewRef: EmbeddedViewRef<NgIfContext>|null = null;

  constructor(private _viewContainer: ViewContainerRef,templateRef: TemplateRef<NgIfContext>) {
    this._thenTemplateRef = templateRef;
    //可以看出，then模版就是ngif的内联模版
  }

@Input()
  set ngIf(condition: any) {
    this._context.$implicit = this._context.ngIf = condition;
    this._updateView();
    //接受传递进来的值 true或者false，然后更新视图
  }

  @Input()
  set ngIfThen(templateRef: TemplateRef<NgIfContext>) {
    this._thenTemplateRef = templateRef;
    //就收传递进来的值，then指向的模版引用变量
    this._thenViewRef = null;
    //清空then视图引用，如果只调用一次，可以不清空，如果调用多次，必须清空 
    this._updateView();
  }

  @Input()
  set ngIfElse(templateRef: TemplateRef<NgIfContext>) {
    this._elseTemplateRef = templateRef;
    this._elseViewRef = null;  
    this._updateView();
  }

private _updateView() {
    // 首先判断condition的值时true或者false
    if (this._context.$implicit) {
      if (!this._thenViewRef) {
        this._viewContainer.clear();
        //清空视图包含容器，其实也可以不用清空，因为thenViewRef elseViewRef会被清空
        this._elseViewRef = null;
        if (this._thenTemplateRef) {
          this._thenViewRef =
              this._viewContainer.createEmbeddedView(this._thenTemplateRef,this._context);
              //视图包含容器创建内嵌视图，并返回创建后的视图引用
        }
      }
    } else {
      if (!this._elseViewRef) {
        this._viewContainer.clear();
        this._thenViewRef = null;
        if (this._elseTemplateRef) {
          this._elseViewRef =
              this._viewContainer.createEmbeddedView(this._elseTemplateRef,this._context);
        }
      }
    }
  }
}

export class NgIfContext {
  public $implicit: any = null;
  public ngIf: any = null;
}

自定义NgIf

@Input()
  set appHngif(condition) {
    this.context.$implicit = this.context.ngIf = condition;
    this.updateView();
  }

  updateView() {
    if (this.context.$implicit) {
      this.viewContainerRef.createEmbeddedView(this.thenTemplate,this.context);
    } else {
      this.viewContainerRef.clear();
    }
  }

全部代码