Angular2：条件显示，绑定到 [hidden] 属性与 *ngIf 指令 [重复]

Posted 2023-03-05

【中文标题】Angular2：条件显示，绑定到 [hidden] 属性与 *ngIf 指令 [重复]

【英文标题】：Angular2: conditional display, bind to [hidden] property vs. *ngIf directive [duplicate]

【发布时间】：2017-02-08 05:35:57

【问题描述】：

在 Angular2 中，假设我想有条件地显示一个 <div> 块。以下两种方式有什么区别。

<div [hidden]=isLoaded>Hello World!</div> 其中isLoaded 是对应.ts 文件中的布尔值。

<div *ngIf=isLoaded>Hello World!</div>

我知道即使<div> 没有显示在页面中，1. 在 DOM 中仍然有 <div>，而 2. 没有。还有其他区别吗？它们各自的优缺点是什么？

【问题讨论】：

鉴于您已经知道其中的区别，您真正想知道什么？

这就是区别.. 让我们考虑一下这种情况，您有 100 个城市的下拉列表。 =>一旦您单击下拉列表就会显示您的列表，因为它已经在 DOM 上，而在其他情况下，城市列表将在 DOM 上创建然后显示，因此在这种情况下，它将出现在一定的延迟。取决于你想如何使用它。

@jonrsharpe 我不确定是否还有其他差异，并想了解首选哪种方式。对了，我也不知道什么是[class.hidden]，你为什么把它从问题中去掉？

***.com/questions/35578083/…

@GünterZöchbauer 您的链接答案正是我想要的，谢谢~

【参考方案1】：

不同之处在于*ngIf 将从DOM 中删除元素，而[hidden] 实际上通过设置display:none 使用CSS 样式。但是，[hidden] 的问题在于它可以被覆盖，因此 div（如您的情况）将被显示，您会摸不着头脑为什么它不起作用。

总而言之，*ngIf 和 [hidden] 完全不相同。前者从 DOM 中移除一个元素，而后者切换 display CSS 属性。

【讨论】：

@BingLu 它绑定到hidden attribute。

它不是隐藏类。它是一个操纵 CSS 显示属性的属性。

如果您将[hidden] display: none !important; 添加到您的CSS 设置[hidden] 应该可以正常工作。另请参阅***.com/questions/35578083/…

可以说[hidden] 比*ngIf 快吗？

@SkorunkaFrantišek 据我了解，恰恰相反。 [hidden] 将对象保存在 DOM 中，因此占用内存和其他资源，因为 Angular 将继续跟踪对这些对象的更改，即使它们被隐藏。因此，特别是对于大型对象树，使用 *ngIf 将是有益的。但是，添加到 DOM 或从 DOM 中删除也会带来计算成本。如果性能至关重要，则可能应该使用 jsPerf 来测试这两个选项。