*ngif 和显示隐藏的区别

100 阅读 0 评论 66 点赞

我是靠谱客的博主霸气早晨，这篇文章主要介绍*ngif 和显示隐藏的区别，现在分享给大家，希望可以做个参考。

1.
当隐藏子树时，它仍然留在 DOM 中。子树中的组件及其状态仍然保留着。即使对于不可见属性，Angular 也会继续检查变更。子树可能占用相当可观的内存和运算资源。
当NgIf为false时，Angular 从 DOM 中物理地移除了这个元素子树。它销毁了子树中的组件及其状态，也潜在释放了可观的资源，最终让用户体验到更好的性能。
2.
防范空指针错误
ngIf指令通常会用来防范空指针错误。而显示/隐藏的方式是无法防范的，当一个表达式尝试访问空值的属性时，Angular就会抛出一个异常。

这里我们用NgIf来保护了两个<div>防范空指针错误。 currentHero的名字只有当存在currentHero时才会显示出来。而nullHero永远不会显示。

<div *ngIf="currentHero">Hello, {{currentHero.name}}</div>

<div *ngIf="nullHero">Hello, {{nullHero.name}}</div>