Angular 15中使用ngIf结构指令导致应用冻结问题求助

核心问题本质 #

<ng-component>是Angular内部用于承载动态创建组件的特殊占位容器，它不属于常规DOM元素，渲染逻辑和普通组件/元素存在差异。

当你把*ngIf直接应用在<ng-component>上时，会触发Angular变更检测的无限循环：

1. *ngIf条件满足时，Angular会尝试渲染<ng-component>及其内部内容
2. <ng-component>作为动态组件容器，完成渲染时会触发新一轮的变更检测
3. 变更检测会重新评估*ngIf的绑定条件——如果是方法调用（比如你的test()），每次检测都会执行一次，进而再次触发<ng-component>的渲染流程
4. 这个循环会持续进行，最终耗尽浏览器资源，导致应用冻结

为什么普通元素没问题？ #

像<h1>这类常规DOM元素，渲染过程不会触发额外的变更检测循环。*ngIf的条件评估和元素渲染是单次闭环的，不会反复触发检测，所以不会出现循环。

StackBlitz中正常运行的可能原因 #

StackBlitz的默认Angular环境可能带有预编译优化、生产模式默认开启，或者你的简化示例没有引入项目中影响变更检测的依赖（比如自定义变更检测策略、第三方库），导致循环没有被触发。

解决方法 #

不要直接在<ng-component>上绑定结构指令，改用<ng-container>或者普通容器包裹后再用*ngIf：

<ng-container *ngIf="true">
  <ng-component><h1>hello</h1></ng-component>
</ng-container>

如果是动态组件场景，也可以通过控制组件工厂的创建时机来替代*ngIf的条件渲染，从根源避免循环触发。

内容的提问来源于stack exchange，提问作者succeed