可见性:隐藏在Angular 2中

时间:2017-07-24 13:19:52

标签: css angular

在角度2中实现元素不可见性的建议方法是什么(visibility:hidden不显示元素但保持空间占用)?它有一个[hide]指令,但似乎与display:none

类似

4 个答案:

答案 0 :(得分:54)

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

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

this plunker中显示了一个示例。

答案 1 :(得分:6)

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

public class MyClassSpecialComparer : IEqualityComparer<Product> { public bool Equals (Product x, Product y) { return x.ProductName == y.ProductName && x.ProductCategory == y.ProductCategory } public int GetHashCode(Product x) { return x.ProductName.GetHashCode() + x.ProductCategory.GetHashCode(); } } public void MyMethod(string productName, string productCategory) { // }

答案 2 :(得分:0)

如果您不希望在DOM中呈现组件,则可以执行ngIf。

如果您希望渲染该组件但未显示,则可以根据具有NgClass的条件将display设置为none。但请注意,这可能导致一些错误行为尝试始终使用ngIf

答案 3 :(得分:-6)

尝试ngShow

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

隐藏控制器中的元素:

$scope.myValue = false