Question

我使用Angular 1创建一个包含少量视图的简单应用程序，并在每个视图中创建大量内容（图像+文本）。我正在尝试像this website这样的加载栏。（或Youtube上的那个）

这意味着：

点击链接转到下一个视图
在下一个视图加载（数据+图像）时加载当前视图，带有加载栏
显示满载时的下一个视图

我检查了很多模块，特别是角度加载条，但我无法弄清楚如何：

在页面加载之前使其正常工作
获取加载百分比（显示实际加载的百分比）

你知道吗？我看过很多网站都这样做，但我找不到任何解释如何做的文章。

感谢

Answer 1

通过编写一个跟踪Angular路由器负载变化的服务并根据它发出值，我获得了成功。

您可以通过将路由器注入服务并在其上调用setUpLocationChangeListener来挂钩路由器加载并完成事件，这允许您在router.events挂钩到Observable，例如：

// loading.service.ts

this.router.setUpLocationChangeListener();

let routeChangeEvent = this.router.events;
routeChangeEvent
    .filter(() => event => event instanceof NavigationEnd || event instanceof NavigationStart) // these types can be imported from @angular/router
    .subscribe(() => /*emit your own events from here*/)

这将让您挂钩路由器加载事件。不幸的是，这些都不是确定的;没有办法从角度路线变化中获得加载进度。

您可以将服务注入到具有加载栏的组件中，并设置逻辑以显示从那里开始的加载。

就跟踪AJAX调用而言，Angular Http服务目前不允许跟踪进度。这个包是一个很好的小包装来修复它：angular-progress-http。它与普通的Http服务保持一致但允许对进度事件进行可选跟踪，这些事件的百分比为0到100.您的加载栏需要能够插入这些值（官方Angular Material加载栏运行良好））。

使用此软件包，您可以在LoadingService上添加方法，以便调用开始和结束加载事件和进度的组件，反过来您的加载栏组件也可以监听。

非常模糊的例子：

// loading.service.ts:
export class LoadingService {

  public onLoadChange: EventEmitter<any> = new EventEmitter<any>();

  constructor(router: Router) { /* subscribe to load events like above */ }


  public updateProgress(progress): void {
        this.onProgressChange.emit(progress.percentage);
  }

  public endLoad(): void {
        this.onLoadChange.emit({ active: false });
  }


// loading-bar.component.ts

....
export class LoadingbarComponent {

  constructor(loader: LoadingService) {

    this.loader.onLoadChange.subscribe((event) => {
      // do logic with your loading bar here
    }

  }

}

现在，为了在显示页面之前加载所有内容，这将是艰难。您可以查看渐进式Web应用程序，但事情是，当内容尚未在DOM中时，不会触发onPageReady事件。您可以做的是查看路由器的resolve方法，该方法在路由定义中定义。在Angular加载页面之前，resolve函数（或服务）需要返回true。因此，例如，您可以在单击路径时获取大图像或ajax数据，但会延迟页面显示，直到数据实际存在。

注意我会不将此视为最佳做法，因为通常您希望页面尽可能快地更改。人类感知许多短等待（如页面加载内容）与单个较长等待（比如用1.5秒更换页面）有很大不同。无论哪种方式，resolve上的更多信息都可用in this excellent article.

祝你好运！

预加载下一个路线，然后在Angular中更改它

1 个答案: