Angular 2 通过 promise 和 await 从 url 获取价值

Question

所以我试图从 url 中获取值，我想用 promise 和 async/await 来做到这一点。但是当我在 chrome 和 opera 中运行它时，它只是站在那里等待。 任何人都可以指出我正确的方向还是我做错了什么？

我的组件实现：实现 OnInit

构造函数：

constructor(private route: ActivatedRoute, 
            private zone : NgZone
            ) 
            {

            }

进口：

import { Component, OnInit, NgZone } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs/Rx';

方法：

async ngOnInit() 
{
    var Id : string = await this.getIdFromUrl(); 
}


getIdFromUrl() : Promise<string> 
    {
        return this.route.params.map(params => 
        {   
            return params['id']; 
        }).toPromise();  
    }

Answer 1

ngOnInit 应该返回 void。设为async 表示XY 问题，这deviates from the interface 因为异步ngOnInit 返回一个promise 并导致潜在的未捕获promise 错误。如果有应在初始化时解决的承诺，则可以将它们设置为解析器。

route.params 是一个 observable，因为它在使用不同参数导航到同一条路线时会发出多个值。它没有完成，调用toPromise() 将导致未完成的承诺。因此，observables 不能与 Promise 互换。

初始参数值在组件初始化时已知并且是同步的。可通过ActivatedRouteSnapshot interface 访问，

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

根据路由的使用方式和route reuse strategy，这可能无法按预期工作，因为不会处理后续参数更改。出于这个原因，通常最好坚持使用route.params observable。