热门标签 | 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元素的设计和位置.
推荐阅读
  • 本文基于对相关论文和开源代码的研究,详细介绍了LOAM(激光雷达里程计与建图)的工作原理,并对其关键技术进行了分析。 ... [详细]
  • IT项目管理过程中的方法、工具、技术
    工欲善其事,必先利其器。而对于一个软件开发项目,最重要的器就是方法,工具和技术。而这三要素中重要的又是方法论,方法是基础&# ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 1.如何在运行状态查看源代码?查看函数的源代码,我们通常会使用IDE来完成。比如在PyCharm中,你可以Ctrl+鼠标点击进入函数的源代码。那如果没有IDE呢?当我们想使用一个函 ... [详细]
  • 本文介绍了如何在具备多个IP地址的FTP服务器环境中,通过动态地址端口复用和地址转换技术优化网络配置。重点讨论了2Mb/s DDN专线连接、Cisco 2611路由器及内部网络地址规划。 ... [详细]
  • 深入理解 SQL 视图、存储过程与事务
    本文详细介绍了SQL中的视图、存储过程和事务的概念及应用。视图为用户提供了一种灵活的数据查询方式,存储过程则封装了复杂的SQL逻辑,而事务确保了数据库操作的完整性和一致性。 ... [详细]
  • 本文详细介绍了 Dockerfile 的编写方法及其在网络配置中的应用,涵盖基础指令、镜像构建与发布流程,并深入探讨了 Docker 的默认网络、容器互联及自定义网络的实现。 ... [详细]
  • c# – UWP:BrightnessOverride StartOverride逻辑 ... [详细]
  • 数据库内核开发入门 | 搭建研发环境的初步指南
    本课程将带你从零开始,逐步掌握数据库内核开发的基础知识和实践技能,重点介绍如何搭建OceanBase的开发环境。 ... [详细]
  • 本文详细介绍了如何使用 Yii2 的 GridView 组件在列表页面实现数据的直接编辑功能。通过具体的代码示例和步骤,帮助开发者快速掌握这一实用技巧。 ... [详细]
  • 本文深入探讨 MyBatis 中动态 SQL 的使用方法,包括 if/where、trim 自定义字符串截取规则、choose 分支选择、封装查询和修改条件的 where/set 标签、批量处理的 foreach 标签以及内置参数和 bind 的用法。 ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • 使用 Azure Service Principal 和 Microsoft Graph API 获取 AAD 用户列表
    本文介绍了一段通用代码示例,该代码不仅能够操作 Azure Active Directory (AAD),还可以通过 Azure Service Principal 的授权访问和管理 Azure 订阅资源。Azure 的架构可以分为两个层级:AAD 和 Subscription。 ... [详细]
  • 深入解析Spring Cloud Ribbon负载均衡机制
    本文详细介绍了Spring Cloud中的Ribbon组件如何实现服务调用的负载均衡。通过分析其工作原理、源码结构及配置方式,帮助读者理解Ribbon在分布式系统中的重要作用。 ... [详细]
  • 在前两篇文章中,我们探讨了 ControllerDescriptor 和 ActionDescriptor 这两个描述对象,分别对应控制器和操作方法。本文将基于 MVC3 源码进一步分析 ParameterDescriptor,即用于描述 Action 方法参数的对象,并详细介绍其工作原理。 ... [详细]
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社区 版权所有