Angular中结合BehaviorSubject的ngIf触发元素渲染顺序异常如何解决

根因 #

BehaviorSubject初始值为false，页面初始加载时前两个带*ngIf的p标签不会被渲染，只有第三个无判断条件的p标签直接渲染，导致它出现在页面最顶部；后续当两个Subject值变为true时，前两个p标签才会被插入到原有第三个p标签上方，出现顺序错位的观感。

解决方案 #

方案1：给通用提示添加显示判断（推荐）

仅当两个弹窗至少有一个触发显示时，才渲染通用提示，保证出现顺序永远匹配预期：

<p *ngIf="stateService.showExportCsvModal | async">
    {{'exportModal.severalMinutesToComplete' | translate }}
</p>

<p *ngIf="stateService.showDownloadModal | async">
    {{ 'exportModal.severalMinutesToCompleteDownload' | translate }}
</p>

<p *ngIf="(stateService.showExportCsvModal | async) || (stateService.showDownloadModal | async)">
    {{'exportModal.downloadTheFinishedFileFrom' | translate }}
</p>

方案2：使用hidden属性控制显隐

如果需要通用提示常驻页面，可将*ngIf替换为[hidden]，三个元素会永久保留在DOM中，永远按模板顺序排列：

<p [hidden]="!(stateService.showExportCsvModal | async)">
    {{'exportModal.severalMinutesToComplete' | translate }}
</p>

<p [hidden]="!(stateService.showDownloadModal | async)">
    {{ 'exportModal.severalMinutesToCompleteDownload' | translate }}
</p>

<p>
    {{'exportModal.downloadTheFinishedFileFrom' | translate }}
</p>

方案3：优化订阅次数（性能优化）

提前将异步结果存入模板变量，避免重复订阅Observable，性能更优：

<ng-container *ngIf="{
  showExport: stateService.showExportCsvModal | async,
  showDownload: stateService.showDownloadModal | async
} as state">
  <p *ngIf="state.showExport">
      {{'exportModal.severalMinutesToComplete' | translate }}
  </p>

  <p *ngIf="state.showDownload">
      {{ 'exportModal.severalMinutesToCompleteDownload' | translate }}
  </p>

  <p *ngIf="state.showExport || state.showDownload">
      {{'exportModal.downloadTheFinishedFileFrom' | translate }}
  </p>
</ng-container>

内容的提问来源于stack exchange，提问作者Khandakar Rashed Hassan