详解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调试技巧解决样式问题的步骤分享
Mar 15 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
JS常用表单验证方法总结
May 22 Javascript
jquery图片切换插件
Mar 16 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
JavaScript 巧学巧用
May 23 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 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
PHP4实际应用经验篇(7)
2006/10/09 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
php分页函数示例代码分享
2014/02/24 PHP
Javascript 面向对象 重载
2010/05/13 Javascript
jquery中this的使用说明
2010/09/06 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
python装饰器代码深入讲解
2021/03/01 Python
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
模范家庭事迹材料
2014/02/10 职场文书
房产代理公证处委托书
2014/04/04 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
英语邀请函范文
2015/02/02 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
电工实训心得体会
2016/01/14 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
财产分割协议书
2016/03/22 职场文书
详解Vue slot插槽
2021/11/20 Vue.js
使用MybatisPlus打印sql语句
2022/04/22 SQL Server