通常web开发者会选择将元素样式属性display设为none来隐藏目标元素。采用这种方式,这些元素虽然不可见却仍然保存在DOM中,这样带来的好处是,如果元素不久就需要再次显示,组件不需要重新被初始化,组件的状态因为之前被保留所以可以马上显示。但是将元素隐藏也会带来别的问题,在Angular应用里,如果隐藏一个元素,它仍然保留在DOM树中,Angular会继续检测那些可能发生变化的数据绑定,组件的所有行为将会保持,这种情况下,组件及其所有的子节点仍然会占用资源,消耗更多的内存,从而影响性能。

NgStyle和NgIf两种指令均可以实现控制元素的显示,具体如下:

使用NgStyle指令可以通过改变样式将元素隐藏,当在组件中使用NgStyle指令进行如下设置时,可以将组件在DOM树中隐藏,示例代码如下:

NgStyle指令
<div [ngStyle]="{'display': 'none'}">display none</div>

NgIf指令不是通过改变样式将元素隐藏,而是根据输入变量布尔值,在输入变量值为false时,把这些元素从DOM中移除,停止监测相关组件绑定的属性是否有变化,释放它的DOM事件监听器并且销毁组件,组件将会被垃圾回收并且释放内存。示例代码如下:

NgIf指令
<div *ngIf="condition''>当condition的值为true,此组件可见</div>

-- 我是大自然的搬运工,原文摘自:《揭秘Angular 2》-- 228页。

NgStyle和NgIf控制HTML标签显示的区别的更多相关文章

  1. ElementUI使用v-if控制tab标签显示遇到的Duplicate keys detected: 'xxx'问题

    今天工作遇到一个问题: 需求背景:页面中有几个tab,需要根据登录用户的权限控制tab标签的显示与隐藏 . <el-tabs @tab-click="handleClick" ...

  2. 【js】【图片显示】js控制html页面显示图片方式

    js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...

  3. Struts1.x 中处理乱码及通过标签显示数据

    1.通过filter解决乱码问题 网页的请求到达之前,先要经过filter的处理: 提取数据出现乱码:request.setCharacterEncoding("UTF-8"); ...

  4. Struts2(六.用标签显示用户列表及Value Stack和Stack Context)

    一.用Struts2标签显示用户列表 原理: 在struts中可以通过在action中将所有用户的信息存入到某个范围中,然后转向userlist.jsp,进行访问 原则: 在jsp网页上,尽量不要出现 ...

  5. 微信小程序点击控制元素的显示与隐藏

    微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...

  6. 控制label标签的宽度,不让它换行 label标签左对齐

    1==>控制label标签的宽度.解决字段名太长时,不会换行显示 label-width="100px" label标签的宽度是100px; style="widt ...

  7. legend3---19、要更多的从服务器端控制元素的显示和隐藏,而不要是页面端

    legend3---19.要更多的从服务器端控制元素的显示和隐藏,而不要是页面端 一.总结 一句话总结: 这样可以控制很多页面端的非法操作 1.html标签中data方式的数据,修改之后在标签上只显示 ...

  8. wmctrl像xmonad那样方便地用快捷键来控制任务窗口的显示

    窗口左右互搏之wmctrl篇 分类: LINUX 2012-10-24 16:34:41   一直有个念头,就是能够像xmonad那样方便地用快捷键来控制任务窗口的显示,今天弄wmctrl,刚好有时间 ...

  9. 浏览器内核控制Meta标签说明文档【转】

    背景介绍 由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览.基于IE的内核用于兼容网银.旧版网站.以360的几款浏览器为例,我们优先通过Webkit内核渲 ...

随机推荐

  1. poj1011 Sticks[剪枝题]

    https://vjudge.net/problem/POJ-1011 此题很重要.★★★ 很欢(e)乐(xin)的一道搜索剪枝题..poj数据还是太水了,我后来想不出来剪枝方法了,就加了句掐了时间语 ...

  2. 【LeetCode】047. Permutations II

    题目: Given a collection of numbers that might contain duplicates, return all possible unique permutat ...

  3. 【Lintcode】159.Find Minimum in Rotated Sorted Array

    题目: Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7  ...

  4. 51Nod 1362 搬箱子 —— 组合数(非质数取模) (差分TLE)

    题目:http://www.51nod.com/Challenge/Problem.html#!#problemId=1362 首先,\( f[i][j] \) 是一个 \( i \) 次多项式: 如 ...

  5. check_MK安装部署(nagios4版本)

    概述: 操作系统版本:CentOS release 6.3 (Final) 64位 nagios版本:Nagios Core 4.0.6 pnp4nagios版本:pnp4nagios-0.6.22 ...

  6. makefile 使用【转载】

    该篇文章为转载,是对原作者系列文章的总汇加上标注. 支持原创,请移步陈浩大神博客: http://blog.csdn.net/haoel/article/details/2886 makefile很重 ...

  7. CAS单点登录学习(二):客户端配置

    下载jar包因为cas的源码修改变动很大,所以客户端引入的jar包根据服务端的war包而定.之前搭建的cas服务端用的版本是3.5.2,经过测试,可以使用cas-client-core的3.2.1版本 ...

  8. 使用二次封装的openStack发行版本网卡至少有2个

  9. iview组件DatePicker type="datetimerange绑定初始默认时间值

    使用::value="[this.startTime,this.endTime]",绑定当天时间 如下: <DatePicker type="datetimeran ...

  10. js实现星级评分之方法一

    利用一个星级评分的小案例,来逐步封装js星级评分插件. 从最基础的js知识,通过一个小的demo,逐步学习js的面向对象知识. 从浅到深,逐步递进. 图片素材 <!DOCTYPE html> ...