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

【问题标题】：Fully load content before showing it with Angular 2在使用 Angular 2 显示之前完全加载内容
【发布时间】：2018-11-28 06:34:51
【问题描述】：

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

因此，当它最终加载时，我不得不额外刷新几次以查看/显示实际图像。

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

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

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

对此有何提示？

【问题讨论】：

你从generateImage()电话中得到了什么？它似乎返回一个Observable，但x 的值是多少？它是生成图像的 url 吗？
x 值只是一个真或假，不管调用是否成功。如果为真，则图像已创建并存储在图像文件夹中，如果为假，则生成图像时出错。
因此，如果值为true，您知道如何找到图像的 url 或 blob 吗？为什么不使用此 url 或 blob 从组件中发出事件以进行显示？

标签： javascript angular ngoninit

【解决方案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;
})

【讨论】：

【解决方案2】：

在您的 ngOnInit 上使用：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：