详解Angular 4.x NgIf 的用法

<!--语法糖--><div *ngIf="condition">...</div><!--Angular 2.x中使用template--><ng-template [ngIf]="condition"><div>...</div></ng-template>

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

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

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

@Component({ selector: 'ng-if-then-else', template: `  <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>  <button (click)="switchPrimary()">Switch Primary</button>    show = {{show}}  <br>  <div *ngIf="show; then thenBlock; else elseBlock">this is ignored</div>  <ng-template #primaryBlock>Primary text to show</ng-template>  <ng-template #secondaryBlock>Secondary text to show</ng-template>  <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template> `})class NgIfThenElse implements OnInit { thenBlock: TemplateRef<any> = null; show: boolean = true;  @ViewChild('primaryBlock') primaryBlock: TemplateRef<any> = null; @ViewChild('secondaryBlock') secondaryBlock: TemplateRef<any> = null;  switchPrimary() {  this.thenBlock = this.thenBlock === this.primaryBlock ?    this.secondaryBlock : this.primaryBlock; }  ngOnInit() {    this.thenBlock = this.primaryBlock; }}

// angular/packages/core/src/linker/template_ref.tsexport abstract class TemplateRef<C> { abstract get elementRef(): ElementRef; abstract createEmbeddedView(context: C): EmbeddedViewRef<C>;}

// angular/packages/common/src/directives/ng_if.tsexport class NgIfContext { public $implicit: any = null; public ngIf: any = null;}

@Directive({  selector: '[ngIf]' // 属性选择器 - <ng-template [ngIf]="condition">})

export class NgIf { // 创建NgIfContext上下文 private _context: NgIfContext = new NgIfContext(); // 表示then模板对象 private _thenTemplateRef: TemplateRef<NgIfContext>|null = null; // 表示else模板对象 private _elseTemplateRef: TemplateRef<NgIfContext>|null = null; // 表示根据then模板创建的EmbeddedViewRef视图 private _thenViewRef: EmbeddedViewRef<NgIfContext>|null = null; // 表示根据else模板创建的EmbeddedViewRef视图 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(); // 更新视图}@Input()set ngIfThen(templateRef: TemplateRef<NgIfContext>) {  this._thenTemplateRef = templateRef;  this._thenViewRef = null; // 清除之前创建的视图  this._updateView();}@Input()set ngIfElse(templateRef: TemplateRef<NgIfContext>) {  this._elseTemplateRef = templateRef;  this._elseViewRef = null; // 清除之前创建的视图  this._updateView();}

// 更新视图private _updateView() { // this._context.$implicit = this._context.ngIf = condition // 若condition表达式的值为truthy if (this._context.$implicit) { // 若_thenViewRef为null且_thenTemplateRef存在，则创建_thenViewRef内嵌视图   if (!this._thenViewRef) {    this._viewContainer.clear();    this._elseViewRef = null;    if (this._thenTemplateRef) {     this._thenViewRef =       this._viewContainer.createEmbeddedView(this._thenTemplateRef,        this._context);    }   }  } else { // condition表达式的值为falsy   // 若_elseViewRef为null且_elseTemplateRef存在，则创建_elseViewRef内嵌视图   if (!this._elseViewRef) {    this._viewContainer.clear();    this._thenViewRef = null;    if (this._elseTemplateRef) {     this._elseViewRef =       this._viewContainer.createEmbeddedView(this._elseTemplateRef,         this._context);    }   }  }}

// angular/packages/core/src/linker/view_container_ref.tsexport abstract class ViewContainerRef {  /**  * 基于TemplateRef对象创建Embedded View(内嵌视图)，然后根据`index`指定的值，插入到容器中。   * 如果没有指定`index`的值，新创建的视图将作为容器中的最后一个视图插入。  */  abstract createEmbeddedView<C>(   templateRef: TemplateRef<C>,    context?: C, index?: number):   EmbeddedViewRef<C>;}

// angular/packages/core/src/view/refs.tsclass ViewContainerRef_ implements ViewContainerData {  // ...  createEmbeddedView<C>(   templateRef: TemplateRef<C>,    context?: C, index?: number):   EmbeddedViewRef<C> {    // 调用TemplateRef对象createEmbeddedView()方法创建EmbeddedViewRef对象    const viewRef = templateRef.createEmbeddedView(context || <any>{});     // 根据指定的index值，插入到视图容器中    this.insert(viewRef, index);    return viewRef; }}// ViewContainerData接口继承于ViewContainerRef抽象类export interface ViewContainerData extends ViewContainerRef { _embeddedViews: ViewData[];}export interface ViewData { def: ViewDefinition; root: RootData; renderer: Renderer2; parentNodeDef: NodeDef|null; parent: ViewData|null; viewContainerParent: ViewData|null; component: any; context: any; nodes: {[key: number]: NodeData}; state: ViewState; oldValues: any[]; disposables: DisposableFn[]|null;}

// angular/packages/core/src/linker/template_ref.tsexport abstract class TemplateRef<C> { abstract createEmbeddedView(context: C): EmbeddedViewRef<C>;}

// angular/packages/core/src/view/refs.tsclass TemplateRef_ extends TemplateRef<any> implements TemplateData { // ... createEmbeddedView(context: any): EmbeddedViewRef<any> {  return new ViewRef_(Services.createEmbeddedView(    this._parentView, this._def, this._def.element !.template !, context)); }}export interface TemplateData extends TemplateRef<any> { _projectedViews: ViewData[];}

// angular/packages/core/src/view/types.tsexport const Services: Services = { setCurrentNode: undefined !, createRootView: undefined !, createEmbeddedView: undefined !, createComponentView: undefined !, createNgModuleRef: undefined !, overrideProvider: undefined !, clearProviderOverrides: undefined !, checkAndUpdateView: undefined !, checkNoChangesView: undefined !, destroyView: undefined !, resolveDep: undefined !, createDebugContext: undefined !, handleEvent: undefined !, updateDirectives: undefined !, updateRenderer: undefined !, dirtyParentQueries: undefined !,};

// angular/packages/core/src/view/services.tsexport function initServicesIfNeeded() { if (initialized) {  return; } initialized = true; const services = isDevMode() ? createDebugServices() : createProdServices(); Services.setCurrentNode = services.setCurrentNode; Services.createRootView = services.createRootView; Services.createEmbeddedView = services.createEmbeddedView; Services.createComponentView = services.createComponentView; Services.createNgModuleRef = services.createNgModuleRef; Services.overrideProvider = services.overrideProvider; Services.clearProviderOverrides = services.clearProviderOverrides; Services.checkAndUpdateView = services.checkAndUpdateView; Services.checkNoChangesView = services.checkNoChangesView; Services.destroyView = services.destroyView; Services.resolveDep = resolveDep; Services.createDebugContext = services.createDebugContext; Services.handleEvent = services.handleEvent; Services.updateDirectives = services.updateDirectives; Services.updateRenderer = services.updateRenderer; Services.dirtyParentQueries = dirtyParentQueries;}

function createProdServices() { return {  setCurrentNode: () => {},  createRootView: createProdRootView,  createEmbeddedView: createEmbeddedView // 省略了其它方法}

// angular/packages/core/src/view/view.tsexport function createEmbeddedView(  parent: ViewData, anchorDef: NodeDef, viewDef: ViewDefinition, context?: any): ViewData { // embedded views are seen as siblings to the anchor, so we need // to get the parent of the anchor and use it as parentIndex. // 创建ViewData对象 const view = createView(parent.root, parent.renderer, parent, anchorDef, viewDef); // 初始化ViewData对象-设置component及context属性的值 initView(view, parent.component, context); // 创建视图中的节点，即设置view.nodes数组的属性值 // const nodes = view.nodes; for(...) { ...; nodes[i] = nodeData; } createViewNodes(view); return view;}

ViewContainerRef_ -> createEmbeddedView()  => TemplateRef_ -> createEmbeddedView()  => Services -> createEmbeddedView()   => Call createEmbeddedView()