display:none 和 *ngIf = 'false' 之间有什么区别? [英] What's the difference between display:none and *ngIf = 'false'?

问题描述

display:none 是 css 表.它
将从 DOM 树中删除元素.ngIf = 'false' 也从 DOM 树中删除元素.它们有什么区别?

解决方案

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

<小时>

隐藏对比(display:none) 与删除 (*ngIf='false')

来自 Angular 指南

<块引用>

隐藏和移除的区别对于一个简单的段落.当宿主元素附加到一个资源密集型组件.这样一个组件的行为继续即使隐藏.组件保持附加到它的 DOM 元素.它一直在监听事件.Angular 不断检查更改可能会影响数据绑定.无论组件在做什么，它都会保持

虽然不可见，但组件及其所有后代组件——占用资源.性能和内存负担可能是实质性，响应能力会降低，用户什么也看不到.

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

但是如果没有令人信服的理由保留它们，您的首选应该是删除用户看不到的 DOM 元素并使用像 NgIf 这样的结构指令恢复未使用的资源.

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

希望这能帮助您了解它们之间的区别.

The display:none is css sheet. It
will remove elements from DOM tree. The ngIf = 'false' also remove elements from DOM tree. What's the difference between them?

解决方案

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.

But when see the DOM of the page using dev tool, still elements does exist in the DOM tree. It means elements do not remove completely from the DOM tree.

---

*ngIf="false"

Completely remove the elements from the DOM tree. Because of that when it comes to page rendering, compare to display:none, using *ngIf="false" serving better performance with fast page rendering.

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.

---

Following images will describe them well

1) Without using display:none and *ngIf="false"

2) Using display:none and *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.

Hope this will help you to understand the difference between them.

这篇关于display:none 和 *ngIf = 'false' 之间有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！