热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

什么时候应该使用*ngIf而不是隐藏属性,反之亦然?

如何解决《什么时候应该使用*ngIf而不是隐藏属性,反之亦然?》经验,为你挑选了1个好方法。

我知道Angular *ngIfhidden属性之间的区别:

*ngIf:将元素添加/删除到DOM.

hidden:只需显示/隐藏DOM中的元素.

我不确定的是选择一个而不是另一个的正确条件(?).在一个条件下删除元素并再次添加它听起来有点贵,但与此同时,让它与hidden属性保持在DOM中似乎是不对的.

我已经贴到*ngIf像我一样可以,但它有时会发出当我尝试访问该元素在错误*ngIf模板即使我改变的条件下*ngIf,以true(可能是因为我不习惯到DOM更新周期) .在这些情况下,我使用hidden属性,而不是因为它似乎是正确的.

所以关键是,我想知道明确的标准/标准来选择一个而不是另一个.

非常感谢.



1> coder..:

我在Angular文档中为您的问题找到了一些更好的答案.希望它会为您提供清晰的方法来找出从更好的选择*ngIfhidden.

From Angular Guide

隐藏和删除之间的区别对于简单的段落无关紧要.将主机元素附加到资源密集型组件时,这很重要.即使隐藏,这样的组件的行为也会继续.该组件保持与其DOM元素的连接.它一直在听事件.Angular会不断检查可能影响数据绑定的更改.无论组件在做什么,它都在继续.

虽然不可见,但组件及其所有后代组件会占用资源.性能和内存负担可能很大,响应性会降低,用户什么都看不到.

从积极的方面来说,再次显示元素很快.组件的先前状态将保留并准备显示.该组件不会重新初始化 - 可能很昂贵的操作.所以隐藏和展示有时是正确的事情.

但是由于没有令人信服的理由来保留它们,您的偏好应该是删除用户无法看到的DOM元素,并使用结构指令来恢复未使用的资源NgIf .

这些相同的考虑适用于每个结构指令,无论是内置指令还是自定义指令.在应用结构指令之前,您可能希望暂停一下,以考虑添加和删除元素以及创建和销毁组件的后果.


旁注:如果使用**ngIf*,页面可能会因为从DOM中删除元素而闪烁,而*[hidden]*不会影响DOM元素的设计和位置.
推荐阅读
  • 本文详细介绍了Java中org.w3c.dom.Text类的splitText()方法,通过多个代码示例展示了其实际应用。该方法用于将文本节点在指定位置拆分为两个节点,并保持在文档树中。 ... [详细]
  • PyCharm下载与安装指南
    本文详细介绍如何从官方渠道下载并安装PyCharm集成开发环境(IDE),涵盖Windows、macOS和Linux系统,同时提供详细的安装步骤及配置建议。 ... [详细]
  • 优化ASM字节码操作:简化类转换与移除冗余指令
    本文探讨如何利用ASM框架进行字节码操作,以优化现有类的转换过程,简化复杂的转换逻辑,并移除不必要的加0操作。通过这些技术手段,可以显著提升代码性能和可维护性。 ... [详细]
  • 资源推荐 | TensorFlow官方中文教程助力英语非母语者学习
    来源:机器之心。本文详细介绍了TensorFlow官方提供的中文版教程和指南,帮助开发者更好地理解和应用这一强大的开源机器学习平台。 ... [详细]
  • Explore a common issue encountered when implementing an OAuth 1.0a API, specifically the inability to encode null objects and how to resolve it. ... [详细]
  • 深入解析 HDFS Federation:多命名空间架构详解
    HDFS Federation 是一种扩展 HDFS 架构的方式,通过引入多个独立的 NameNode 来解决单点故障和性能瓶颈问题。本文将详细探讨 HDFS Federation 的工作原理、优势以及潜在挑战。 ... [详细]
  • 本文介绍了如何使用 Spring Boot DevTools 实现应用程序在开发过程中自动重启。这一特性显著提高了开发效率,特别是在集成开发环境(IDE)中工作时,能够提供快速的反馈循环。默认情况下,DevTools 会监控类路径上的文件变化,并根据需要触发应用重启。 ... [详细]
  • IT项目管理过程中的方法、工具、技术
    工欲善其事,必先利其器。而对于一个软件开发项目,最重要的器就是方法,工具和技术。而这三要素中重要的又是方法论,方法是基础&# ... [详细]
  • 探讨如何高效使用FastJSON进行JSON数据解析,特别是从复杂嵌套结构中提取特定字段值的方法。 ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 1.如何在运行状态查看源代码?查看函数的源代码,我们通常会使用IDE来完成。比如在PyCharm中,你可以Ctrl+鼠标点击进入函数的源代码。那如果没有IDE呢?当我们想使用一个函 ... [详细]
  • 本文介绍了如何在具备多个IP地址的FTP服务器环境中,通过动态地址端口复用和地址转换技术优化网络配置。重点讨论了2Mb/s DDN专线连接、Cisco 2611路由器及内部网络地址规划。 ... [详细]
  • 深入理解 SQL 视图、存储过程与事务
    本文详细介绍了SQL中的视图、存储过程和事务的概念及应用。视图为用户提供了一种灵活的数据查询方式,存储过程则封装了复杂的SQL逻辑,而事务确保了数据库操作的完整性和一致性。 ... [详细]
  • 本文详细介绍了 Dockerfile 的编写方法及其在网络配置中的应用,涵盖基础指令、镜像构建与发布流程,并深入探讨了 Docker 的默认网络、容器互联及自定义网络的实现。 ... [详细]
  • Python自动化处理:从Word文档提取内容并生成带水印的PDF
    本文介绍如何利用Python实现从特定网站下载Word文档,去除水印并添加自定义水印,最终将文档转换为PDF格式。该方法适用于批量处理和自动化需求。 ... [详细]
author-avatar
snail
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有