display: none 和 *ngIf 和 visibility:hidden 的学习
display:none、*ngIf 和 visibility:hidden 都是用来控制元素的可见性或布局的，但它们的行为和影响有明显的不同。
display: none
- 作用：将元素完全隐藏并从 DOM 中移除，元素不会占用任何页面空间。
- 影响：
- 从布局中移除元素：使用 display:none 的元素会完全从页面布局中消失，其他元素会顶替其位置。
- 元素不再渲染：元素不再被浏览器渲染，因此会节省资源和性能。
- 不会触发生命周期钩子：当元素被 display:none 隐藏时，它不会再触发任何生命周期钩子。
示例：
<div [style.display]="isVisible ? 'block' : 'none'">This content is conditionally shown or hidden.</div>
*ngIf
- 作用：这是 Angular 的结构性指令，用于根据条件 添加或移除 DOM 元素。与 display:none 不同，*ngIf 完全移除元素，即元素从 DOM 中被删除。
- 影响：
- 从 DOM 中移除元素：当条件为 false 时，元素会被完全移除，页面中的空间不再占用该元素。
- 重新创建元素：当条件再次为 true 时，Angular 会重新创建这个元素，初始化所有数据和事件绑定。
- 触发生命周期钩子：当元素进入或离开 DOM 时，Angular 会触发相应的生命周期钩子（如
ngOnInit、ngOnDestroy等）。
示例：
<div *ngIf="isVisible">This content is conditionally rendered.</div>
isVisible 为 true 时，元素会出现在页面上，false 时，元素完全从 DOM 中移除。
visibility: hidden
- 作用：使元素变得不可见，但 元素仍然保留在 DOM 中并占用空间。
- 影响：
- 元素不可见但仍占用空间：使用 visibility:hidden 后，元素仍然存在于文档流中，但它变得完全透明，不会显示出来。其他元素不会顶替它的空间。
- 不会触发生命周期钩子：与 display:none 类似，元素依然存在于 DOM 中，因而 Angular 的生命周期钩子不会被触发。
示例：
<div [style.visibility]="isVisible ? 'visible' : 'hidden'">This content is conditionally shown or hidden.</div>
isVisible 为 true 时，元素可见；false 时，元素不可见，但仍占用空间。
区别总结：
| 属性/指令 | *ngIf | display: none | visibility: hidden |
|---|---|---|---|
| 作用 | 通过 Angular 逻辑控制完全添加或移除元素 | 通过 CSS 控制隐藏元素但保持元素在 DOM 中 | 隐藏元素但元素仍然在 DOM 中且占用空间 |
| DOM 元素移除 | 是（移除元素及其占用的空间） | 否（元素仍在 DOM 中） | 否（元素仍在 DOM 中） |
| 空间占用 | 否（元素完全不占用空间） | 否 | 是（元素仍占据空间） |
| 生命周期钩子 | 会触发进入和离开 DOM 时的钩子（如 ngOnInit, ngOnDestroy） | 不会触发钩子 | 不会触发钩子 |
| 渲染性能 | 可能较低，尤其是频繁添加/移除元素时（动态地销毁和创建 DOM 元素，可能更高效） | 性能较好，但隐藏元素仍在页面布局中占位（不影响 DOM 结构，页面仍需计算隐藏元素） | 性能较好，但元素占用空间 |
| 使用场景 | 适用于需要根据条件动态渲染/销毁元素的情况 | 适用于只需要隐藏元素，不移除元素的情况 | 适用于需要隐藏但保留空间的情况 |
适用场景：
-
使用
*ngIf：当希望元素完全从 DOM 中移除时，比如用户交互时需要动态加载/卸载内容（例如，根据某些条件显示/隐藏表单或列表）。它适用于需要彻底从页面中删除元素并在条件满足时重新创建的情况。 -
使用
display: none：当只需要隐藏元素，或者动态控制元素的显示或隐藏，但不需要频繁的插入和删除 DOM 元素的情况（例如，当元素需要频繁显示/隐藏时，可以避免重新渲染）。它适用于不需要从 DOM 中删除元素，只是临时改变其显示状态的情况。 -
使用
visibility: hidden：当希望元素不可见，但依然占据布局空间时。例如，当需要在某些情况下隐藏内容，但仍保持该元素的尺寸和位置，以便其他内容不会改变布局。
小结：
*ngIf完全移除元素和其占用的空间，并且当元素显示时会重新创建它，适合用于条件性的 DOM 操作。display: none隐藏元素但保留元素在 DOM 中，并且仍然占用空间，适合快速切换元素的显示状态。visibility: hidden使元素不可见，但依然占据空间，适合在不影响布局的情况下隐藏元素。
附加说明：那么 display:none也不占据空间，*ngif也不占据空间，这两者不占据空间的理解有什么区别呢？
这两个概念，display: none 和 Angular 中的 *ngIf，都涉及到隐藏元素和不占据空间的问题，但它们背后的工作原理和实现方式是不同的。
1. display: none;（CSS）
当我们应用 display: none; 时，元素从页面的布局中“消失”了：
- 布局层面：元素依然存在于 DOM 中，但是它不再参与页面的布局计算，因此不会占据任何空间。
- CSS 处理：元素仍然存在于 HTML 结构中，只是通过 CSS 隐藏。它会在浏览器渲染时被“跳过”，并且在 DOM 中是可见的，你可以通过 JavaScript 或 CSS 进一步操作它。
- 行为：隐藏的元素仍然可以通过脚本、CSS 动画等方式被重新显示（改变
display属性）。
例如：
<div style="display: none;">这个元素是隐藏的</div>
该元素 仍然存在于 DOM 中，但是没有任何显示和占用空间。
2. *ngIf（Angular 指令）
在 Angular 中，*ngIf 是一个结构型指令，用于条件渲染某个元素。它的作用是根据给定的条件，动态地添加或删除 DOM 元素：
- DOM 层面：
*ngIf不仅仅是隐藏元素，而是完全从 DOM 中 添加或移除 该元素。如果条件为false，对应的元素根本不存在于 DOM 中；如果条件为true，该元素才会被插入到 DOM 中。 - 渲染层面：与
display: none;不同，*ngIf不只是隐藏元素，它完全从 DOM 中移除该元素，所以它根本不占据任何空间。 - 性能优化：由于
*ngIf会直接销毁元素，如果条件变为true，Angular 会重新创建这个元素。因此，它比display: none;更有效率，尤其是在需要频繁显示和隐藏大量元素时。
例如：
<div *ngIf="isVisible">这个元素根据条件是否存在</div>
如果 isVisible 为 false，这个元素根本不存在于 DOM 中；如果 isVisible 为 true，它会被插入到 DOM 中并显示。
区别总结：
| 特性 | display: none; | *ngIf（Angular） |
|---|---|---|
| 存在与否 | 元素仍然存在于 DOM 中，只是被隐藏 | 元素完全从 DOM 中移除（如果条件为 false） |
| 占据空间 | 不占据空间 | 不占据空间 |
| 渲染行为 | 只是隐藏元素，但元素仍然在页面上，CSS 可以控制显示与否 | 根据条件完全移除或插入元素 |
| 性能 | 不影响 DOM 结构，页面仍需计算隐藏元素 | 动态地销毁和创建 DOM 元素，可能更高效 |
| 控制方式 | 通过 CSS 控制 | 通过 Angular 逻辑控制 |
关键区别：
-
display: none;是 CSS 层面的隐藏，元素仍然存在于 DOM 中，并且仍然会被浏览器渲染，只是不显示在页面上。它不会占用空间，但仍然会参与渲染流程。 -
*ngIf是 Angular 的结构型指令，它决定元素是否 存在于 DOM 中。当*ngIf为false时，元素根本就不存在于 DOM 中，因此不会占用任何空间，也不会参与页面渲染。
原文地址：https://blog.csdn.net/qq_44327851/article/details/143515318
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！