PrimeNG BlockUI异常：block标记为true时偶尔无法遮罩组件

算力阿峰

2026-8-2

PrimeNG 13.4.1/Angular 13.2.1下BlockUI遮罩异常问题

环境：PrimeNG 13.4.1 + Angular 13.2.1（经历多次Angular大版本升级）

异常表现：

部分场景下，布尔变量blockUpdatingPage为true时，BlockUI无法正常遮罩目标组件
仅偶尔能覆盖特定组件，遮罩状态与[blocked]绑定的标记不一致
该问题仅在少数组件上出现

组件代码

<div>
  <p-blockUI [blocked]="blockUpdatingPage" [target]="blocked4" styleClass="overlayZindex">
    <i class="fa fa-lock fa-4x" style="position:absolute;top:25%;left:50%"></i>
  </p-blockUI>
<p-fieldset #blocked4 [hidden]="hideSaveAndUpdate">
  <p> {{ shouldItBeBlocked() }}</p>
  <p-header>7. Save & Update</p-header>
  <div [hidden]="!createNew">
    <br/>
    <p-progressBar mode="indeterminate" [style]="{'height': '6px'}" *ngIf="loadingBar"></p-progressBar>
    <span class="ui-float-label">
        <input [(ngModel)]="inputText" id="float-input" maxlength="200" pInputText type="text">
       <label for="float-input">Create new...</label>
      </span>
    <button (click)="checkIfBenchmarkIsSelectedCreateNew()" [disabled]="disabledFlag"  align="center" label="Save & Continue" pButton
            style="background-color:#215A8F"></button>
    <br/>
  </div>
  <div [hidden]="createNew == true">
    <br/>
    <button (click)="checkIfThingSelected(false)" [disabled]="disabledFlag || blockUpdatingPage" label="Update '{{selectedThing}}'" pButton
            align="center" style="background-color:#215A8F"></button>
    <br/>
  </div>
</p-fieldset>
</div>

状态验证函数

shouldItBeBlocked() {
  if (this.blockUpdatingPage === false) {
    return 'it should not be blocked now';
  } else {
    return 'it should be blocked now';
  }
}