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

Posted 2023-03-13

【中文标题】如何在角度生命周期钩子中使用等待？

【英文标题】：How to use await in angular lifecycle hooks?

【发布时间】：2021-08-31 21:35:27

【问题描述】：

stackblitz code

我正在开发一个角度应用程序来导出 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 中：)

【参考方案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 应该显示用户数。这就是等待答复的全部意义所在。 :)