Question

在angular component我正在从service http call生成图像，然后我想在网站上显示该图像。但是，生成图像所需的时间比加载站点所需的时间长。

因此，当最终加载时，我被迫刷新一些额外的时间来查看/显示实际图像。

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

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

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

有任何提示吗？

Answer 1

你可以这样做：

<强>标记：

<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 2

关于你的ngOnInit使用：

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

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

Answer 3

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

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

Answer 4

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

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

4 个答案: