Angular ngClass 還是隱藏在異步管道中以加載指示器？

Question

在我的 Angular 6 應用程序中，我使用 HTTP 攔截器在所有 HTTP 請求上實現了一個加載欄。 本質上是在loaderService 中返回一個 observable 。 這按預期工作，我可以使用下面的代碼在每個請求上添加一個加載欄。

    <mat-progress-bar
      *ngIf="loaderService.isLoading | async"
      color="accent"
      mode="indeterminate">
    </mat-progress-bar>

這需要異步管道才能工作，但是我更願意簡單地隱藏/顯示欄，而不是使用 ngIf 從 dom 中刪除/添加，它顯示添加或刪除時正在移動的內容。

我傾向於使用ngClass或[hidden]但是我不知道如何或是否可以使用異步管道。 在我的嘗試中，它沒有奏效。 有沒有其他方法可以實現我的要求？

Answer 1

如果您仍在為此苦苦掙扎，請在頂部添加一個包裝器，然后應用隱藏屬性。

<div [hidden]="!(loaderService.isLoading | async)">
   <mat-progress-bar color="accent" mode="indeterminate"></mat-progress-bar>
</div>

hidden 屬性不能直接在 mat-progress-bar 上工作的原因是因為它有一個display: block應用在類級別的display: block ，它比屬性更相關。

css 的另一個選擇是添加以下內容：

mat-progress-bar[hidden] { visibility: hidden; }

（這更好，因為沒有看到跳躍效果）