角ngClass或隐藏与异步管道加载指标？

Question

在Angular 6应用中，我已经使用HTTP拦截器在所有HTTP请求上实现了加载栏。本质上是在 loaderService 中返回可观察值。这可以按预期工作，我可以使用以下代码在每个请求上添加加载栏。

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

这需要异步管道起作用，但是我宁愿更简单地隐藏/显示栏，而不是使用ngIf从dom中删除/添加，dom显示添加或删除内容时正在移动的内容。

我倾向于使用ngClass或[hidden]，但是我不知道如何或是否可以使用异步管道。在我的尝试中，它没有起作用。有其他选择可以实现我的要求吗？

Answer 1

如果您仍在为此苦苦挣扎，请在顶部添加一个包装器，然后应用隐藏的属性。

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

隐藏属性之所以不能直接在mat-progress-bar上使用，是因为它在类级别应用了display: block，比该属性更重要。

css的另一种选择是添加：

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

（这更好，因为没有看到跳跃效果）