angular - Angular 2+ 中 ngShow 和 ngHide 的等价物是什么？

Question

我有一些元素希望在特定条件下可见。

在 AngularJS 中我会写

<div ng-show="myVar">stuff</div>

我如何在 Angular 2+ 中执行此操作？

Answer 1

hidden 属性可用于此

[hidden]="!myVar"

另见

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

问题

hidden 有一些问题，因为它可能与 display 属性的 CSS 冲突。

查看Plunker example中的一些不会被隐藏，因为它有风格

:host {display: block;}

设置。 (这在其他浏览器中可能表现不同——我用 Chrome 50 测试过)

解决方法

你可以通过添加来修复它

[hidden] { display: none !important;}

index.html 中的全局样式。

另一个陷阱

hidden="false"
hidden="{{false}}"
hidden="{{isHidden}}" // isHidden = false;

与

相同

hidden="true"

并且不会显示该元素。

hidden="false" 将分配被认为是真实的字符串 "false"。
只有值 false 或删除属性才会真正使元素可见。

使用 {{}} 也会将表达式转换为字符串，但不会按预期工作。

只有与 [] 绑定(bind)才会按预期工作，因为此 false 被分配为 false 而不是 "false".

*ngIf 与 [hidden]

*ngIf 有效地从 DOM 中删除了它的内容，而 [hidden] 修改了 display 属性并且只指示浏览器不显示内容，但 DOM 仍然包含它。