javascript - ActivatedRoute 的 Angular promise 不适用于 Typescript 等待

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，它应该可以通过 Promise 转换为 Promise strong>toPromise() 并因此与 Typescript async/await 一起使用。我将 await 语句与来自 HttpClient 模块的 Observables 一起使用就好了。

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

Answer 1

基本答案是:这里有无法控制的竞争条件

当您访问 Observable route.params 时，它尚未完成是很正常的。此时调用 toPromise() 将导致持久挂起的 Promise，这就是您面临的问题。

如果您不必使用此异步等待构造，请保留它并更好地通过 ActivatedRouteSnapshot 直接同步访问 params.id。

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