什么时候应该使用*ngIf而不是隐藏属性,反之亦然？

我知道Angular *ngIf和hidden属性之间的区别:

*ngIf:将元素添加/删除到DOM.

hidden:只需显示/隐藏DOM中的元素.

我不确定的是选择一个而不是另一个的正确条件(？).在一个条件下删除元素并再次添加它听起来有点贵,但与此同时,让它与hidden属性保持在DOM中似乎是不对的.

我已经贴到*ngIf像我一样可以,但它有时会发出当我尝试访问该元素在错误*ngIf模板即使我改变的条件下*ngIf,以true(可能是因为我不习惯到DOM更新周期) .在这些情况下,我使用hidden属性,而不是因为它似乎是正确的.

所以关键是,我想知道明确的标准/标准来选择一个而不是另一个.

非常感谢.

我在Angular文档中为您的问题找到了一些更好的答案.希望它会为您提供清晰的方法来找出从更好的选择*ngIf和hidden.

From Angular Guide

隐藏和删除之间的区别对于简单的段落无关紧要.将主机元素附加到资源密集型组件时,这很重要.即使隐藏,这样的组件的行为也会继续.该组件保持与其DOM元素的连接.它一直在听事件.Angular会不断检查可能影响数据绑定的更改.无论组件在做什么,它都在继续.

虽然不可见,但组件及其所有后代组件会占用资源.性能和内存负担可能很大,响应性会降低,用户什么都看不到.

从积极的方面来说,再次显示元素很快.组件的先前状态将保留并准备显示.该组件不会重新初始化 - 可能很昂贵的操作.所以隐藏和展示有时是正确的事情.

但是由于没有令人信服的理由来保留它们,您的偏好应该是删除用户无法看到的DOM元素,并使用结构指令来恢复未使用的资源NgIf .

这些相同的考虑适用于每个结构指令,无论是内置指令还是自定义指令.在应用结构指令之前,您可能希望暂停一下,以考虑添加和删除元素以及创建和销毁组件的后果.