0

您好，我想在每个路由链接上放置加载程序，当路由链接更改时显示加载程序，直到其所有组件都没有加载 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）数据后显示和隐藏，我不能明智地为页面（路由）放置加载器

4

1 回答 1

0

您可以订阅 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>

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

应用组件 

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 加载时间。为此，您可以this.loaderService.hideLoader();从 中删除NavigationEnd并将其添加到您的 API 调用订阅中。这就是我们将其添加为服务的原因。您可以将其注入您的 API 服务并隐藏加载程序。

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

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

于 2019-08-29T08:38:07.973 回答