【发布时间】：2018-05-28 01:43:37
【问题描述】：
display:none 是 CSS 表单。它
将从 DOM 树中删除元素。
ngIf = 'false' 也会从 DOM 树中移除元素。
它们有什么区别？
【问题讨论】：
标签： angular
【发布时间】：2018-05-28 01:43:37
【问题描述】：
display:none
none值可以关闭元素的显示；什么时候 你使用none，所有的后代元素也有它们的显示 关掉。文档呈现为好像元素没有 存在于文档树中。
但是当使用开发工具查看页面的 DOM 时，DOM 树中仍然有元素确实存在。这意味着元素不会从 DOM 树中完全删除。
*ngIf="false"
从 DOM 树中完全删除元素。因此，在页面渲染方面，与 display:none 相比，使用 *ngIf="false" 可以提供更好的性能和快速的页面渲染。
ngIf指令不会使用 CSS 隐藏元素。它添加和 从 DOM 中物理移除它们。使用浏览器确认这一事实 用于检查 DOM 的开发人员工具。当条件为
false时，NgIf从 DOM，将其与 DOM 事件（它制作的附件）分离， 将组件从 Angular 更改检测中分离出来，并销毁它。 组件和 DOM 节点可以被垃圾回收和释放 记忆。
以下图片将很好地描述它们
1) 不使用 display:none 和 *ngIf="false"
2) 使用 display:none 和 *ngIf="false"
Comparison of hiding (display:none) vs removing (*ngIf='false')
隐藏和删除之间的区别对于简单的来说并不重要 段落。将宿主元素附加到 资源密集型组件。这样一个组件的行为继续 即使隐藏。该组件保持附加到其 DOM 元素。它 继续收听事件。 Angular 会不断检查 可能会影响数据绑定。无论组件在做什么，它都会保持 做。
虽然不可见，但组件——以及它的所有后代 组件——占用资源。性能和内存负担可能是 实质上，响应能力会降低，用户什么也看不到。
从积极的方面来说，再次显示元素很快。这 组件的先前状态被保留并准备显示。这 组件不会重新初始化——一个可能很昂贵的操作。 所以隐藏和展示有时是正确的做法。
但如果没有令人信服的理由来保留它们，您的 首选应该是删除用户看不到的 DOM 元素 并使用类似
NgIf的结构指令恢复未使用的资源 .这些相同的考虑适用于每个结构指令，无论是 内置或定制。在应用结构性指令之前，您可以 想暂停片刻考虑添加和 删除元素以及创建和销毁组件。
希望这将帮助您了解它们之间的区别。
【讨论】：
display: none; 不会阻止浏览器呈现该元素。
ngIf = "false" 将阻止该项目首先被渲染。如果/当ngIf 计算结果为真时，该元素将呈现，如果表达式再次变回假，那么您的元素将从 DOM 树中完全删除。
display:none; 不是这样。这只会导致元素不被显示并且应用了任何其他 CSS。 display:none; 不会影响页面呈现/加载的速度。
这意味着理论上使用ngIf 加载页面会更快。
【讨论】：
display:none; 将从 DOM 中移除 DOM 元素的视觉样式/物理空间，而不是完全移除元素本身。可以用angular中的属性[Hide]替换。
而 *ngIf 是一个角度内置指令，如果 *ngIf 为 false 将从 DOM 中删除元素
【讨论】：
ngIf 是一个角度指令，而 display:none 是一个 CSS 类 property，其值为 none。它们在呈现页面的 HTML DOM 的方式上具有独特性。
ngIf
ngIf 指令根据表达式删除或重新创建DOM 的一部分。根据OP，您将表达式提供为false (ngIf = 'flase')。因此，该元素将从 DOM 中移除。
当一个元素被使用ngIf 移除时，它的作用域被破坏，当元素被恢复时一个新的作用域被创建。在ngIf 中创建的范围使用原型继承从其父范围继承。
显示：无
display:none 隐藏了给定的 HTML 元素。 display 是元素上的 CSS 类，并将显示样式设置为无。
【讨论】：
@coder 很好地解释了差异。 “显示：无；”的事实不销毁元素也意味着如果你用它来隐藏一个组件，组件的 onDestroy 方法不会被调用，它的所有订阅都会持续存在
【讨论】：
display:none 隐藏元素，但如果您使用 Chrome 开发工具（例如）探索 DOM，您可以看到该元素存在。它没有被删除。 使用 ngIf，元素会从 DOM 中移除。
display:none 相当于 AngularJs 中的 ng-hide/ng-show。
警告！ 确实使用 ngIf 页面加载速度更快，但如果您有一个元素会在显示和隐藏之间切换多次，最好使用 display:none 或 ngHide，因为在ngIf = false 和ngIf = true 之间的每一个变化，都会向服务器生成一个请求。
由！
【讨论】：