display：none和* ngIf =＆＃39; false＆＃39 ;?之间的区别是什么？

Question

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

Answer 1

display: none;不会阻止浏览器呈现该元素。

ngIf = "false"会阻止该项首先呈现。如果/ ngIf计算结果为true，则该元素将呈现，如果表达式再次变回false，则元素将完全从DOM树中删除。

display:none;不适用。这只会导致元素不显示并且应用了任何其他CSS。 display:none;不会影响页面呈现/加载的速率。

这意味着使用ngIf理论上加载页面的速度会更快。

Answer 2

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事件（它所做的附件）中分离出来，   将组件与角度变化检测分离，并将其销毁。   组件和DOM节点可以被垃圾收集和释放   存储器中。

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

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

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

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

From Angular Guide

  

隐藏和删除之间的区别对于简单而言并不重要   段。当主机元素连接到a时，它确实很重要   资源密集型组件。这种组件的行为仍在继续   即使隐藏。该组件保持与其DOM元素的连接。它   一直听事件。 Angular会不断检查更改   可能会影响数据绑定。无论组件在做什么，它都会保留   做。

     

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

     

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

     

但是由于没有令人信服的理由让他们保持身边，你的   首选项应该是删除用户无法看到的DOM元素   并使用结构指令（如NgIf）恢复未使用的资源   

     

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

希望这有助于您了解它们之间的区别。

Answer 3

display:none; 会从DOM中删除DOM元素的视觉样式/物理空间，而不是完全是元素本身。哪个可以替换为angular中的 [Hide] 属性。

而* ngIf是一个角度内置指令，而 *ngIf 如果为false将从DOM中删除该元素

Answer 4

ngIf是一个角度指令并显示：none是一个值为property的CSS类none。它们在呈现页面的HTML DOM方面具有独特性。

<强>

<强> ngIf

ngIf指令根据表达式删除或重新创建DOM的一部分。根据{{​​1}}，您提供的表达式为OP（ false ）。因此，该元素将从DOM中删除。

使用ngIf = 'flase'删除元素时，其范围将被销毁，并在元素恢复时创建新范围。在ngIf内创建的范围继承自其父范围，使用原型继承。

<强>

的显示：无

ngIf隐藏了给定的HTML元素。 display:none是元素上的CSS类，并将显示样式设置为none。

Answer 5

@coder 很好地解释了这种差异。 “显示：无；”的事实不销毁元素也意味着如果您使用它来隐藏组件，则不会调用该组件的 onDestroy 方法，并且它的所有订阅都将保留

Answer 6

display：none 隐藏了该元素，但如果您使用Chrome开发工具（例如）浏览DOM，则可以看到该元素存在。它没有删除。 使用 ngIf ，该元素将从DOM中删除。

显示：无相当于AngularJs中的 ng-hide / ng-show 。

警告！使用ngIf页面加载速度更快，但如果你有一个元素可以在show和hide之间切换多次，最好使用display：none或ngHide，因为 ngIf = false和ngIf = true之间的每次更改，都会向服务器生成请求。

按照！