可见性：隐藏在 Angular 2 中

Posted 2023-03-06

【中文标题】可见性：隐藏在 Angular 2 中

【英文标题】：visibility:hidden in Angular 2

【发布时间】：2017-12-30 02:37:45

【问题描述】：

在角度 2 中实现元素不可见的建议方法是什么（visibility:hidden 不显示元素但保持其空间被占用）？它有一个[hide] 指令，但它似乎类似于display:none

【问题讨论】：

opacity:0 woudl 似乎是一种选择......不是吗？

【参考方案1】：

您可以使用style binding 设置visibility 样式属性：

<div [style.visibility]="'hidden'"></div>
<div [style.visibility]="isDivVisible ? 'visible' : 'hidden'"></div>

this plunker 中显示了一个示例。

编辑： 您可以制定一个指令以使这更容易： https://stackblitz.com/edit/angular-ivy-6sac33?file=src%2Fapp%2Fhide-element.directive.ts

【参考方案2】：

您还可以使用 Angular 的功能来动态检查您的属性并使用 NgStyle 刷新 DOM：

<div [ngStyle]="'visibility':isDivVisible ? 'visible' : 'hidden'"></div>

【参考方案3】：

试试ngShow。

<div ng-show="myValue"></div>

从控制器中隐藏元素：

$scope.myValue = false

【讨论】：

这是为 AngularJS (Angular 1) 准备的。 “Angular”是指 Angular 2（及以下版本），它们完全不同。这个问题专门针对 Angular 2+

而ngShow相当于display:none而不是visibility:hidden

【参考方案4】：

如果你不希望你的组件在 DOM 中呈现，你可以使用 ngIf。

如果您希望该组件被渲染但不显示，您可以根据 NgClass 的条件将显示设置为无。但请注意，这可能会导致一些错误行为尝试始终使用 ngIf

【讨论】：

我更新了我的问题，我希望组件不可见，但我仍然希望它占用空间。

您需要visibility:hidden 才能占用空间。 display:none 将使页面表现得像从未渲染过一样。