Angular ngClass 或用异步管道隐藏以加载指示器？答案

【问题标题】：Angular ngClass or hidden with async pipe for loading indicator?Angular ngClass 或用异步管道隐藏以加载指示器？
【发布时间】：2019-06-12 21:30:47
【问题描述】：

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

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

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

我倾向于使用ngClass 或[hidden]，但是我不知道如何或是否可以使用异步管道。在我的尝试中，它没有奏效。有没有其他方法可以达到我的要求？

【问题讨论】：

你的尝试是什么？可以发一下吗？
[hidden]="loaderService.isLoading | async" 没用？
它不起作用，但是即使 [hidden]="true" 作为测试，也没有隐藏它。它总是可见的。
你可能有一个css，上面有display:inline 或display:block，上面有!important 标记。像这样的可能性利用 [hidden] 不可靠。所以，想想你的要求:)
如果你仍然倾向于使用隐藏，参考这篇文章有几个有用的建议：stackoverflow.com/questions/34650410/…

【解决方案1】：

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

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

hidden 属性不能直接在 mat-progress-bar 上起作用的原因是因为它在类级别应用了display: block，这比属性更相关。

css 的另一个选项是添加这个：

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

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

【讨论】：