Angular 2中的visibility:hidden

Question

在 Angular 2 中，如何以推荐的方式实现元素不可见（visibility:hidden 不显示元素但仍然占用空间）？它有一个 [hide] 指令，但似乎类似于 display:none。

- jesantana

---

opacity:0 似乎是一个选项...不是吗？ - Paulie_D

Answer 1

你可以使用样式绑定设置visibility样式属性：

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

一个例子显示在这个 plunker中。

编辑： 您可以创建一个指令来简化此操作： https://stackblitz.com/edit/angular-ivy-6sac33?file=src%2Fapp%2Fhide-element.directive.ts

- ConnorsFan

Answer 2

你也可以利用Angular的能力动态检查你的属性，并使用NgStyle刷新DOM： <div [ngStyle]="{'visibility':isDivVisible ? 'visible' : 'hidden'}"></div>

- Lanou

Answer 3

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

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

- Eduardo Vargas

---

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

你需要使用 visibility:hidden 让元素占据空间。而 display:none 则会使页面表现得好像从未被渲染过一样。 - vasia

Answer 4

尝试使用 ngShow。

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

从控制器隐藏元素：

$scope.myValue = false

- Valérian Polizzi

---

这是针对AngularJS（Angular 1）的。 "Angular"表示Angular 2（及其后续版本），它们有根本不同。该问题特别针对Angular 2+。 - Pac0

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