来自 ActivatedRoute 的 Angular 承诺不适用于 Typescript await

Question

要访问当前 URL 路径中的组件，在我的应用程序中执行以下操作：

constructor(private route: ActivatedRoute) { }
...
load() {
    this.route.params.subscribe((params) => {
      const id = +params['id'];
      console.log('got parameter', id);
 ... etc

这是教科书案例，变量id设置为广告。但我想使用更优雅的await形式，但它不起作用。（当然，后面会有一串await语句。）像这样：

async load() {
    try {
      console.log('getting parameters');
      const params = await this.route.params.toPromise();
      console.log('got params', params);
      const id = +params['id'];
  ... etc

我得到的是第一个console.log()调用的输出，但第二个从未出现。当然，id变量没有设置，其余的代码永远不会执行。

文档和工作代码说this.route.params是一个Observable，它应该可以通过toPromise()转换为Promise，从而与 Typescript async / await 一起使用。我对来自HttpClient模块的Observable使用await语句就好了。

但它不起作用。有谁知道为什么？

Answer 1

基本答案是：您在这里遇到了无法控制的竞争条件

当您访问 Observableroute.params时，它尚未完成是很正常的。toPromise()在这个时间点调用它会导致一个持久未决的 Promise，这就是你面临的问题。

如果您不绑定使用此 async await 构造，请保留它并更好地params.id通过 ActivatedRouteSnapshot直接同步访问。

ngOnInit() {
    const id: string = route.snapshot.params.id;
}