angular - display:none 和 *ngIf = 'false' 有什么区别？

Question

是display:nonecss 表。它将
从 DOM 树中删除元素。ngIf = 'false'还从 DOM 树中删除元素。他们之间有什么区别？

标签： angular

Answer 1

display:none

From MDN Web Docs

该值none允许您关闭元素的显示；当您使用 时none，所有后代元素的显示也会关闭。文档呈现为好像该元素在文档树中不存在。

但是当使用开发工具查看页面的 DOM 时，DOM 树中仍然存在元素。这意味着元素不会从 DOM 树中完全删除。

---

*ngIf="false"

从 DOM 树中完全删除元素。因此，在页面渲染方面，与 相比display:none，使用*ngIf="false"更快的页面渲染提供更好的性能。

From Angular Guide

该ngIf指令不会使用 CSS 隐藏元素。它从 DOM 中物理添加和删除它们。使用浏览器开发者工具检查 DOM 确认这一事实。

当条件为false时，NgIf将其宿主元素从 DOM 中移除，将其与 DOM 事件（它制作的附件）分离，将组件从 Angular 更改检测中分离，并销毁它。组件和 DOM 节点可以进行垃圾回收并释放内存。

---

以下图片将很好地描述它们

1）不使用display:none和*ngIf="false"

2) 使用display:none和*ngIf="false"

---

隐藏 ( display:none) 与移除 ( *ngIf='false')的比较

From Angular Guide

隐藏和删除之间的区别对于简单的段落并不重要。当宿主元素附加到资源密集型组件时，它确实很重要。即使隐藏，此类组件的行为也会继续。该组件保持附加到其 DOM 元素。它一直在监听事件。Angular 不断检查可能影响数据绑定的更改。无论组件在做什么，它都会继续做。

尽管是不可见的，但该组件——以及它的所有后代组件——占用了资源。性能和内存负担可能很大，响应能力可能会降低，并且用户什么也看不到。

从积极的方面来说，再次显示元素很快。组件的先前状态被保留并准备显示。组件不会重新初始化——这个操作可能很昂贵。所以隐藏和展示有时是正确的做法。

但是在没有令人信服的理由保留它们的情况下，您的首选应该是删除用户看不到的 DOM 元素，并使用NgIf .

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

希望这将帮助您了解它们之间的区别。