zoukankan      html  css  js  c++  java
  • NgStyle和NgIf控制HTML标签显示的区别

    通常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页。

  • 相关阅读:
    复利计算
    实验四 主存空间的分配和回收
    0526 Sprint1个人总结 & 《构建之法》第八、九、十章
    实验三 进程调度模拟程序
    0427 scrum & 读后感
    0415 评论
    0414 结对2.0
    汉堡包
    0406 结对编程总结
    读《构建之法》第四章有感
  • 原文地址:https://www.cnblogs.com/alkq1989/p/7516651.html
Copyright © 2011-2022 走看看