详解Angular 4.x NgIf 的用法


Posted in Javascript onMay 22, 2017

NgIf 指令作用

ngIf 指令用于根据表达式的值,在指定位置渲染 then 或 else 模板的内容。

  1. then 模板除非绑定到不同的值,否则默认是 ngIf 指令关联的内联模板。
  2. else 模板除非绑定对应的值,否则默认是 null。

NgIf 指令语法

简单形式

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

使用else块

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

使用then和else块

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

使用as语法

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

NgIf 使用示例

@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;
 }
}

基础知识

TemplateRef
TemplateRef 实例用于表示模板对象,TemplateRef 抽象类的定义如下:

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

ViewContainerRef

ViewContainerRef 实例提供了 createEmbeddedView() 方法,该方法接收 TemplateRef 对象作为参数,并将模板中的内容作为容器 (comment 元素) 的兄弟元素,插入到页面中。

NgIfContext

NgIfContext 实例用于表示 NgIf 上下文。

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

NgIf 源码分析

NgIf 指令定义

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

NgIf 类私有属性及构造函数

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指令关联的内联模板
 }
}

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();
}

_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);
    }
   }
  }
}

ngIf 指令的源码相对比较简单,最核心的是 _updateView() 方法。而该方法中最重要的功能就是如何基于模板对象创建内嵌视图。接下来我们来分析一下 ViewContainerRef 对象的 createEmbeddedView() 方法。

ViewContainerRef - createEmbeddedView()

方法签名

// angular\packages\core\src\linker\view_container_ref.ts
export 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.ts
class 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;
}

通过观察 ViewContainerRef_ 类中的 createEmbeddedView() 方法,我们发现该方法内部是调用 TemplateRef 对象的 createEmbeddedView() 方法来创建内嵌视图。因此接下来我们再来分析一下 TemplateRef 对象的 createEmbeddedView() 方法。

TemplateRef - createEmbeddedView()

方法签名

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

方法实现

// angular\packages\core\src\view\refs.ts
class 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[];
}

看完上面的源码,毫无疑问接下来我们要继续分析 Services 对象中的 createEmbeddedView() 方法。

Services - createEmbeddedView()

Services 对象定义

// angular\packages\core\src\view\types.ts
export 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 !,
};

Services 对象初始化

// angular\packages\core\src\view\services.ts
export 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;
}

initServicesIfNeeded() 方法中,会根据当前所处的模式,创建不同的 Services 对象。接下来 我们直接来看一下 createProdServices() 方法:

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

createEmbeddedView() 方法

// angular\packages\core\src\view\view.ts
export 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;
}

此时发现如果完整分析所有的方法,会涉及太多的内容。源码分析就到此结束,有兴趣的读者请自行阅读源码哈(请各位读者见谅)。接下来我们来总结一下 createEmbeddedView() 方法调用流程:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js截取小数点后几位的写法
Nov 14 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
vue-hook-form使用详解
Apr 07 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 Javascript
JS实现无缝循环marquee滚动效果
May 22 #Javascript
jQuery表单验证之密码确认
May 22 #jQuery
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 #Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 #Javascript
JavaScript表单验证实现代码
May 22 #Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 #jQuery
原生JS实现N级菜单的代码
May 21 #Javascript
You might like
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
Python图算法实例分析
2016/08/13 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
python requests.post带head和body的实例
2019/01/02 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
什么是组件架构
2016/05/15 面试题
给领导的致歉信范文
2014/01/13 职场文书
应用外语系自荐信
2014/06/26 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
教师外出学习心得体会
2016/01/18 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL