详解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 相关文章推荐
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
Vue 使用中的小技巧
Apr 26 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
vuex actions异步修改状态的实例详解
Nov 06 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 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实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
Python制作Windows系统服务
2017/03/25 Python
Python使用django搭建web开发环境
2017/06/09 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
Python3简单实现串口通信的方法
2019/06/12 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
Python基于Faker假数据构造库
2020/11/30 Python
原装进口全世界:天猫国际
2016/08/03 全球购物
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
销售代表求职自荐信
2013/10/01 职场文书
董事长职责范文
2013/11/08 职场文书
经典演讲稿范文
2013/12/30 职场文书
学术会议开幕词
2016/03/03 职场文书
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技