在Angular 7中更改路径时加载微调器动画

Question

我使用Angular动画（淡入淡出，淡出等等）但我想在从一个路径更改为另一个路径时显示自定义加载微调器：产品列表详细说明产品（以及返回的方式）。

当路线改变时，旋转器必须适合整个<router-outlet></router-outlet>容器。

我没有找到如何通过仅使用动画来实现这一点。可以吗？我只是

我做了类似的事情，但对于app加载（不是路由更改），使用以下代码：

<app-root>
  <div class="app-loading">
    <div class="logo"></div>
    <svg class="spinner" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
    </svg>
  </div>
</app-root>

实际上，我通过在从API检索数据时显示消息来解决方法。像这样 ：

<div class="col-12" *ngIf="loadingEvents">
  <div class="alert alert-info"><i class="fa fa-spinner fa-pulse" aria-hidden="true"></i>Loading events</div>
</div>

以及组件中HTTP客户端内部的逻辑。

但是，这不是路由更改之间的加载微调器，当我已经在下一个路由时，它在执行HTTP请求时是一个微调器。所以，这是一个在组件逻辑中的代码。我不要那个。我想要与动画相同的概念。

Answer 1

拦截器检测何时执行请求。从您的示例中我了解到执行了一个请求：产品列表详细了解产品。

您可以按照本文实现文章的拦截器：https://medium.com/@zeljkoradic/loader-bar-on-every-http-request-in-angular-6-60d8572a21a9

关于加载器的类型，我不会使用微调器，也许某些请求将被执行得非常快，所以你只会看到一个闪烁。也许你可以在文章中使用相同的东西。