Question

我正在为我的角度应用程序创建一个加载器。

最常见的方法是在订阅http请求时传递布尔参数，但我的服务的响应是一系列图像URL，因为页面中充满了图像。

因此，当URL被检索时，加载程序停止，但由于连接速度慢，用户会因为图像尚未完成加载而感到烦躁。

我曾尝试使用Javascript的load事件来监听我的资源何时加载，所以我可以在那时停止加载器，但似乎我无法从侦听器函数中操纵加载器的值。

这是我尝试过的：

//the TS component 
isLoading: boolean;

ngOnInit() {
this.isLoading = true;
this.checkIfLoaded();
}

checkIfLoaded() {
  window.addEventListener("load", function (event) {
    console.log("All resources finished loading!");
    //here i should do something, either returning false or...
    //...manipulating the isLoading, but i can't access isLoading from here
  });
}


//the template
<ng-container *ngIf="isLoading">
   <app-spinner></app-spinner>
</ng-container>

环境：Angular 4.4 非常感谢任何帮助，谢谢

Answer 1

只需让您的组件实现AfterViewInit并在isLoading中将false设置为ngAfterViewInit()。

class YourComponent implements AfterViewInit {
    // ...
    ngAfterViewInit() {
        this.isLoading = false;
    }
}

没有必要附加一个额外的事件处理程序，角度覆盖完全与其生命周期回调。

Answer 2

您的问题是您没有约束正确的事件。

如果您想知道图片是否已加载，您需要创建它们并等待它们加载。

首先获取图片，然后创建HTML元素以加载它们，然后等待所有这些元素加载，最后显示它们：

haveImagesLoaded: boolean[];

this.myService.getPictures().subscribe((urls: string[]) => {
  // no image has loaded, put them all to false
  this.haveImagesLoaded = urls.map(url => false);

  // Iterate over the images
  urls.forEach((url, index) => {
    // Create an HTML image
    let img = new Image();
    // Listen to its loading event
    img.onload = () => {
      // Image has loaded, save the information
      this.haveImagesLoaded[index] = true;
      // If all images have loaded, set your loader to false
      this.isLoading = !this.haveImagesLoaded.some(hasLoaded => !hasLoaded);
    };
  });
  // trigger the loading of the image
  img.src = url;
});

之后，您可以使用您选择的方法自由显示它们。

Answer 3

您应该使用ngAfterViewInit生命周期钩子并将isLoading设置为false。

TS

export class MyClass implements AfterViewInit {
  isLoading: boolean;

  constructor() {
    this.isLoading = true;
  }

  ngAfterViewInit() {
    this.isLoading = false;
  }
}

HTML

<app-spinner *ngIf="isLoading"></app-spinner>

Angular 4 - 检查是否所有页面资源都已完全加载（使加载程序旋转直到所有资源都完全加载）

3 个答案: