在使用 Angular 2 显示之前完全加载内容

Question

在 angular component 中，我从 service http call 生成图像，然后我想将其显示在网站上。但是，生成图像所花费的时间比加载网站所花费的时间要长。

因此我被迫额外刷新几次以 see/display 实际图像最终加载时。

如何让ngOnit在显示页面之前等待所有内容生成和加载？

this.someService.generateImage().subscribe(x => {
    console.log('Image is now in folder')}

我希望页面在此调用后显示。

有什么提示吗？

Answer 1

在你的 ngOnInit 上使用：

  ngOnInit() {
   this.someService.generateImage().subscribe(x => {
    //load page content functions.
    console.log('Image is now in folder')
   });
  }

这是一个解决方法，因为 ngOnInit() 本身不等待异步调用

Answer 2

为什么要停止 ngOnInit 的执行而不是让它加载所有依赖项只是不显示它，您可以应用的 hack 是通过带有加载程序服务的阻塞加载程序隐藏整个页面的内容，并在生成图像时显示页面的内容。像这样。

ngOnInit() {
   loaderService.show();
   this.someService.generateImage().subscribe(x => {
     loaderService.hide();
     console.log('Image is now in folder')
   }
   [Extra dependencies stuff .....]
}

Answer 3

You can do like this:

标记：

<div *ngIf="!isLoading">
   // do not show till loading
</div>

分量：

isLoading = true;

this.someService.generateImage().subscribe((x) => {
   console.log('Image is now in folder')
   this.isLoading = false;
})

Answer 4

您可以使用 ngAfterViewInit() 它会在 dom 完全加载后执行

在使用 Angular 2 显示之前完全加载内容

Fully load content before showing it with Angular 2

javascript

ngoninit

angular