详解Angular2 之 结构型指令


Posted in Javascript onJune 21, 2017

Angular 有一个强力的模板引擎,它能让你轻松维护元素的DOM树结构。

Angular指令可分为三种

  1. 组件
  2. 属性型指令
  3. 结构型指令

组件

组件其实就是一个带模板的指令。是这三种指令中最常用的,我们会编写大量的组件来构建application。

属性型指令

属性型指令会修改元素的外观或者行为。 e.g. NgStyle可以修改元素的好几个样式。

结构型指令

结构型指令通过添加和删除 DOM 元素来改变DOM的布局。

我们经常看到的内置的结构型指令有:ngIf、ngSwitch、ngFor。

下面我们着重介绍ngIf。

NgIf案例分析

该指令接受一个布尔值,并据此让一整块DOM树出现或者消失。

注意:这里是出现或者消失,并不是隐藏。

隐藏元素的利弊

当我们隐藏元素时,组件的行为还在继续。

它仍然附加子啊它所属于的DOM元素上,它仍然在监听事件。angular会继续检查哪些能影响数据绑定的变更。组件原本要做的哪些事情仍然在进行!它还是占用着那么多的资源。

另外一方面,重新显示这个组件会很快。

组件以前的状态被保留着,并随时可以显示。组件不用重新初始化,当然,该操作付出代价比较大!

移除元素组件


把ngIf设置为false,将会影响到组件的资源消耗。angular会从DOM中移除该元素,停止相关组件的变更检测,把它从DOM事件中移除,并且销毁组件。组件会被垃圾回收,并释放内存。


如果我们很快再次使用这个组件的时候,重建组件的代价是非常大的。

当ngIf重新变成true的时候,angular会重新创建该组件及其子树。angular会重新运行每个组件的初始化逻辑。

总结

基于上面的利弊分析,无论是我们在使用内置的指令还是使用自定的指令的时候,我们应该自己分析提添加、移除元素以及创建和销毁组件的后果。

标签

在Angular应用之外,标签的默认CSS属性display是none。 它的内容存在于一个隐藏的文档片段中。
而在Angular应用中,Angular会移除 标签及其子元素。

我们可以通过把短语”Hip! Hip! Hooray!”中间的”hip”包在一个标签中来验证下这个效果。

<p>
 Hip!
</p>
<template>
 <p>
  Hip!
 </p>
</template>
<p>
 Hooray!
</p>

这时候显示的内容是'Hip! Hooray!',在Angular的控制下,DOM的效果是不同的。

详解Angular2 之 结构型指令

显然,Angular把标签及其内容替换成了一个空白

自定义指令

我们自顶一个类似ngIf的指令。

import { Directive, Input } from '@angular/core';
import { TemplateRef, ViewContainerRef } from '@angular/core';

/** 选中器[],是匹配页面上的指令,可以有多个名称,由于是自己的指令,所以没有使用ng开头 */
@Directive({ selector: '[myUnless]' })
export class UnlessDirective {
 /**
  * 我们需要访问模板,并且还需要一个渲染器来渲染它的内容。
  * 我们通过TemplateRef来访问模板。渲染器是ViewContainerRef。
  * 我们把它们都作为私有变量注入到构造函数中。
  */
 constructor(
  private templateRef: TemplateRef<any>,
  private viewContainer: ViewContainerRef
  ) { }

 /**
  * 如果条件为假,我们就渲染模板,否则就清空元素内容。
  * 我们现在先把myUnless属性定义成一个“只写”属性。
  */
 @Input() set myUnless(condition: boolean) {
  if (!condition) {
   this.viewContainer.createEmbeddedView(this.templateRef);
  } else {
   this.viewContainer.clear();
  }
 }
}

几个概念

星号(*)效果

这个星号是一种“语法糖”。它简化了ngIf和ngFor —— 无论是写还是读。

ngIf

接下来这两个ngIf范例的效果完全相同,只是我们写成了另一种风格:

<!-- Examples (A) and (B) are the same -->
<!-- (A) *ngIf paragraph -->
<p *ngIf="condition">
 Our heroes are true!
</p>

<!-- (B) [ngIf] with template -->
<template [ngIf]="condition">
 <p>
  Our heroes are true!
 </p>
</template>

要知道,Angular会把风格(A)写成风格(B)。 它把段落及其内容移到了 标签中。 它把指令移到了 标签上,成为该标签的一个属性绑定 —— 包装在方括号中。 宿主组件的condition 属性的布尔值决定该模板的内容是否应该被显示。

ngFor

Angular把*ngFor转换成一个类似的形式:

<!-- Examples (A) and (B) are the same -->

<!-- (A) *ngFor div -->
<div *ngFor="let hero of heroes">{{ hero }}</div>

<!-- (B) ngFor with template -->
<template ngFor let-hero [ngForOf]="heroes">
 <div>{{ hero }}</div>
</template>

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

Javascript 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
实例浅析js的this
Dec 11 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 #Javascript
Angular.JS中指令ng-if的注意事项小结
Jun 21 #Javascript
jquery.validate表单验证插件使用详解
Jun 21 #jQuery
JS实现简单拖拽效果
Jun 21 #Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 #Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 #jQuery
详解Node.js access_token的获取、存储及更新
Jun 20 #Javascript
You might like
坏狼php学习 计数器实例代码
2008/06/15 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
php下保存远程图片到本地的办法
2010/08/08 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
python转换摩斯密码示例
2014/02/16 Python
python实现从web抓取文档的方法
2014/09/26 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
Python 修改列表中的元素方法
2018/06/26 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
PHP面试题及答案一
2012/06/18 面试题
中专毕业生自我鉴定
2013/11/21 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python