Question

我玩过Angular动画（淡入，淡出等），但我想在从一条路线更改为另一条路线时显示自定义加载微调器：产品列表到产品的详细信息（以及返回的方式）。

在更改路线时，微调框必须放在整个<router-outlet></router-outlet>容器中。

我没有找到仅通过使用动画来实现的方法。请可能吗？我只有

我做了类似的事情，但是使用以下代码来加载应用程序（而不是更改路线）：

<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

关于加载程序的类型，我不会使用微调器，也许某些请求将很快执行，所以您只会眨眼。也许您可以使用与文章中相同的内容。

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

1 个答案: