angular - 显示:none and *ngIf = 'false' ?有什么区别

Question

display:none 是 css 表。它
将从 DOM 树中删除元素。ngIf = 'false' 还会从 DOM 树中删除元素。它们有什么区别？

Answer 1

display:none

From MDN Web Docs

The value none lets you turn off the display of an element; when you use none, all descendant elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tree.

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

---

*ngIf="false"

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

From Angular Guide

The ngIf directive doesn't hide elements with CSS. It adds and removes them physically from the DOM. Confirm that fact using browser developer tools to inspect the DOM.

When the condition is false, NgIf removes its host element from the DOM, detaches it from DOM events (the attachments that it made), detaches the component from Angular change detection, and destroys it. The component and DOM nodes can be garbage-collected and free up memory.

---

下面的图片会很好地描述它们

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

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

---

Comparison of hiding (display:none) vs removing (*ngIf='false')

From Angular Guide

The difference between hiding and removing doesn't matter for a simple paragraph. It does matter when the host element is attached to a resource intensive component. Such a component's behavior continues even when hidden. The component stays attached to its DOM element. It keeps listening to events. Angular keeps checking for changes that could affect data bindings. Whatever the component was doing, it keeps doing.

Although invisible, the component—and all of its descendant components—tie up resources. The performance and memory burden can be substantial, responsiveness can degrade, and the user sees nothing.

On the positive side, showing the element again is quick. The component's previous state is preserved and ready to display. The component doesn't re-initialize—an operation that could be expensive. So hiding and showing is sometimes the right thing to do.

But in the absence of a compelling reason to keep them around, your preference should be to remove DOM elements that the user can't see and recover the unused resources with a structural directive like NgIf .

These same considerations apply to every structural directive, whether built-in or custom. Before applying a structural directive, you might want to pause for a moment to consider the consequences of adding and removing elements and of creating and destroying components.

希望这能帮助您理解它们之间的区别。