CSS 可见性：隐藏在 Angular 2 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45281776/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
visibility:hidden in Angular 2
提问by jesantana
What's the suggested way to achieve element invisibility in angular 2 (visibility:hiddennot showing the element but keeping it space occupied)?. It have a [hide]directive but it seems to be similar to a display:none
在角度 2 中实现元素不可见性的建议方法是什么（visibility:hidden不显示元素但保持其空间被占用）？。它有一个[hide]指令，但它似乎类似于display:none
回答by ConnorsFan
You can set the visibilitystyle attribute with style binding:
您可以visibility使用样式绑定设置样式属性：
<div [style.visibility]="'hidden'"></div>
<div [style.visibility]="isDivVisible ? 'visible' : 'hidden'"></div>
An example is shown in this plunker.
此 plunker 中显示了一个示例。
回答by Lanou
You also can use the ability of angular to dynamically inspect your property and refresh DOM with NgStyle:
您还可以使用 angular 的功能来动态检查您的属性并使用 NgStyle 刷新 DOM：
<div [ngStyle]="{'visibility':isDivVisible ? 'visible' : 'hidden'}"></div>
<div [ngStyle]="{'visibility':isDivVisible ? 'visible' : 'hidden'}"></div>
回答by Eduardo Vargas
You can do ngIf if you don't want your component to be rendered in the DOM.
如果您不希望您的组件在 DOM 中呈现，您可以执行 ngIf。
If you want that component to be rendered but not shown you can just set display to none based on a condition with NgClass. But be aware that this may lead to some buggy behavior try always using ngIf
如果您希望该组件被渲染但不显示，您可以根据 NgClass 的条件将 display 设置为 none。但请注意，这可能会导致一些错误的行为尝试始终使用 ngIf
