如何在角度生命周期钩子中使用等待？答案

【问题标题】：How to use await in angular lifecycle hooks?如何在角度生命周期钩子中使用等待？
【发布时间】：2021-08-31 21:35:27
【问题描述】：

我正在开发一个角度应用程序来导出 PDF，但在导出的 PDF 中看不到数据值。我的方法：我有 2 个组件（登录，主页），在登录组件中创建了一个按钮（导出），它将用户导航到主页组件，在 ViewInit 之后它将生成 pdf。我在 ngAfterViewInit() 生命周期钩子中编写了 pdf 生成代码。当我尝试等待响应时它不起作用。

我在home.component.ts 中尝试了以下两种方法，但仍然没有任何效果

ngAfterViewInit(): void {
    this.fetchUserData().then(() => {
      this.generatepdf();
      this.router.navigateByUrl('login');
    });
  }


async ngAfterViewInit(): void {
    await this.fetchUserData();
    this.generatepdf();
    this.router.navigateByUrl('login');

}

有什么方法可以等待结果并生成 PDF 吗？

预期结果：等待/获取的响应应出现在生成的 PDF 中：)

【问题讨论】：

标签： angular async-await jspdf angular-lifecycle-hooks

【解决方案1】：

您的 pdf 文件是在执行变更检测之前生成的。将private cdr: ChangeDetectorRef 注入到您的构造函数中，并在设置this.users 后调用this.cdr.detectChanges()。

Forked stackblitz

【讨论】：

【解决方案2】：

是的，您可以使用async/await 模式：

async ngAfterViewInit(): Promise<void> {
    await this.fetchUserData();
    this.generatepdf();
    this.router.navigateByUrl('login');

}

演示：https://stackblitz.com/edit/jspdf-final-nwesmc?file=app%2Fviews%2Fhome%2Fhome.component.ts

【讨论】：

我试过 async/await 和 .then 都不起作用。你可以分叉堆栈闪电战并尝试，它不起作用
抱歉忘记了 Promise return
您的代码没有按预期工作。你打开下载的pdf。 pdf 应该显示用户数。这就是等待答复的全部意义所在。 :)