在 Angular 2 中,如何以推荐的方式实现元素不可见(visibility:hidden
不显示元素但仍然占用空间)?它有一个 [hide]
指令,但似乎类似于 display:none
。
你可以使用样式绑定设置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
<div [ngStyle]="{'visibility':isDivVisible ? 'visible' : 'hidden'}"></div>
如果您不希望组件在DOM中呈现,可以使用ngIf。
如果您希望该组件被呈现但不显示,可以根据NgClass的条件将其显示设置为none。但请注意,这可能会导致一些错误行为,请尽量始终使用ngIf。
visibility:hidden
让元素占据空间。而 display:none
则会使页面表现得好像从未被渲染过一样。 - vasia
opacity:0
似乎是一个选项...不是吗? - Paulie_D