html - 如何在 Angular 中的每个路由上加载 Loader

Question

你好，我想把加载器放在每个路由链接上，当路由链接更改时显示加载器，直到它的所有组件都没有加载 api 数据。

组件结构

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

内部<router-outlet></router-outlet>我还有其他类似的子组件，它的数据来自 api。

<app-component1></app-component1>
<app-component2></app-component2>

所以我的问题是，如果页面加载加载器在使用动态(api)数据加载所有组件后显示和隐藏，我无法明智地为页面(路由)放置加载器

Answer 1

您可以订阅 RouterEvents 以了解路线导航何时开始完成。您还需要在路由器导出外的 AppComponent 中有一个加载程序组件，以及一个用于显示/隐藏加载程序的标志。您可以使用 LoaderService 控制加载程序在整个应用程序中的可见性。

加载服务

export class LoaderService {

  isLoaderShown = new BehaviorSubject<boolean>(false);

  constructor() { }

  public showLoader() {
    this.isLoaderShown.next(true);
  }

  public hideLoader() {
    this.isLoaderShown.next(false);
  }

}

您可以使用此 LoaderService 在应用程序的任何位置显示或隐藏加载器。

更新您的 AppComponent 以添加新的加载器组件。 LoaderComponent 只需要包含您选择的加载器。

<app-header></app-header>
<app-loader *ngIf="showLoader"></app-loader>
<router-outlet></router-outlet>
<app-footer></app-footer>

现在我们可以使用 AppComponent 中的 showLoader 标志来控制加载器显示。

应用组件

export class AppComponent implements OnInit {

  showLoader = false;

  constructor(
    private loaderService: LoaderService,
    private router: Router
  ) { }

  ngOnInit() {
    this.loaderService.isLoaderShown.subscribe(isLoaderShown => this.showLoader = isLoaderShown);
    this.router.events.subscribe(routerEvent => {
      if (routerEvent instanceof NavigationStart) {
        this.loaderService.showLoader();
      } else if (routerEvent instanceof NavigationEnd) {
        this.loaderService.hideLoader();
      } else if (routerEvent instanceof NavigationCancel) {
        this.loaderService.hideLoader();
        // Handle cancel
      } else if (routerEvent instanceof NavigationError) {
        this.loaderService.hideLoader();
        // Handle error
      }
    });
  }
}

现在，无论何时开始路由导航，我们都会显示加载器并在导航结束时隐藏。但是，这并没有考虑 API 加载时间。为此，您可以从 NavigationEnd 中删除 this.loaderService.hideLoader(); 并将其添加到您的 API 调用订阅中。这就是我们将其添加为服务的原因。您可以将其注入(inject)您的 API 服务并隐藏加载程序。

this.httpClient.get(url).subscribe(result => {
    // Perform operations with the result
    this.loaderService.hideLoader();
});

因此，加载器将在导航开始时显示，当 API 调用结果在服务中可用时，加载器可以隐藏。