Angular 17中ngIf加载屏延迟显示，主内容先显现问题排查

核心原因1：主内容未被条件隐藏 #

你当前代码里把包裹主内容的<ng-container *ngIf="!LoadingStatus">注释掉了，这意味着主内容从页面加载开始就一直存在于DOM中，只是靠加载屏的z-index覆盖在上面。如果加载屏因为渲染延迟没及时显示，主内容就会先露出来。

核心原因2：Angular渲染与样式应用的时序差 #

虽然你把LoadingStatus初始设为true，但Angular组件渲染和浏览器CSS样式应用存在短暂时序差：浏览器解析HTML时，主内容的DOM节点可能先于加载屏完成渲染，或者加载屏的position: fixed、z-index等CSS规则还没被浏览器解析生效，导致主内容先出现在视口中，之后加载屏才覆盖上去，造成1秒左右的视觉闪烁。

次要因素：浏览器资源加载优先级 #

如果主内容包含图片、第三方组件（比如PrimeNG按钮），这些资源的加载和渲染会抢占浏览器渲染线程，导致加载屏的渲染被短暂延后，进一步加剧主内容先显示的问题。

附：快速修复方案 #

取消注释代码里的<ng-container *ngIf="!LoadingStatus">，让主内容只有在加载完成后才渲染到DOM中：

<div *ngIf="LoadingStatus" class="LoadingScreen">
  <!-- 加载屏内容 -->
</div>

<ng-container *ngIf="!LoadingStatus">
  <div class="background">
    <div id="pLogo">
      <!-- 主内容 -->
    </div>
  </div>
  <router-outlet />
</ng-container>

也可以给主内容加初始隐藏的CSS，双重保障加载屏显示前主内容不可见：

.background, router-outlet {
  visibility: hidden;
}
:host:not(.loading-active) .background, :host:not(.loading-active) router-outlet {
  visibility: visible;
}

（需在组件类中根据LoadingStatus给宿主元素添加/移除loading-active类）

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