Question

在服务器调用正在进行解析时，是否可以在页面上添加加载程序gif？解析器在很多页面上，并且所有加载器的GIF都是相同的，所以有没有全局的方法来做到这一点而不是在每个模板上添加代码？

可以订阅路线更改事件：

router.events.subscribe(evt => {
    if (evt instanceof NavigationStart) {
        // Do what you need to here
    }
});

但我不知道在哪里放这个。至于全局加载器gif，解析器可以访问根组件吗？

Answer 1

将它放在应用程序组件或应用程序引导的主要组件上。

import { Router, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RoutesRecognized } from '@angular/router';
loading = false;
constructor(router:Router) {
  router.events.forEach((event) => {
    if(event instanceof NavigationStart) {
    }
    // NavigationEnd
    // NavigationCancel
    // NavigationError
    // RoutesRecognized
  });
}

将此添加到app.component模板

<div *ngIf ="loading" class ="main">
  <div class="spinner">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
  </div>
</div>

现在使用Router Resolve在路由器解析正在进行时显示微调器。

您可以在此应用Football Scores中找到工作示例。它使用Lazy加载和Router Resolve来加载数据并显示这个微调器。

如何在Angular解析器正在进行时添加加载程序gif

1 个答案: