Angular2 - 将“activatedRoute.params”变成承诺答案

【问题标题】：Angular2 - turn 'activatedRoute.params' into promiseAngular2 - 将“activatedRoute.params”变成承诺
【发布时间】：2017-02-15 13:35:09
【问题描述】：

我正试图将我从ActivatedRoute 得到的参数的可观察值变成一个承诺，但没有任何运气。我已经能够成功地将http 请求变成承诺：

this.riaService.getAdvisorsForState(this.activeState)
    .then(rias => {
        this.riasForState = rias.json();
        console.log(this.riasForState);
    });
// this all works ^

但我无法将 'activatedRoute.params' 变成一个承诺：

export class InvestmentAdvisorStateComponent implements OnInit {

    constructor(private activatedRoute: ActivatedRoute, private riaService: InvestmentAdvisorService) { }

    getStateFromUrl() {
        this.activatedRoute.params
            .toPromise()
            .then(params => {
                console.log('HERE',params)
            });
    }
// this does not work for me ^

这就是我现在拥有的：

getStateFromUrl() {
    this.activatedRoute.params
        .subscribe((param: any) => {
            this.activeState = param['state'];
        });
}
// works ^

我希望将其作为一个承诺的想法来实现，这样我就可以.then 摆脱它。非常感谢任何有关如何执行此操作的帮助。

【问题讨论】：

您期望什么行为？此承诺可能仅在您离开该路线时完成，而 http.get() 在来自服务器的响应到达时完成。
@GünterZöchbauer 哦，我没有意识到这一点。我编辑了我的帖子以显示我现在使用.subscribe 拥有的功能。我正在尝试将我的 observable 变成一个承诺，以便我可以将它与.then 联系起来
为什么不只是.map()
hmm.. 那不允许我把它变成一个承诺
如果你把它变成一个promise，你就违背了使用“live”路由的目的。您不妨只使用快照。

标签： javascript angular promise angular-promise observable

【解决方案1】：

observable 和 promise 的主要区别在于，observable 可以发出多个事件，而 promise 只能发出一个事件。

为了使您的示例有效，我假设您只对第一个事件感兴趣。

getStateFromUrl() {
    this.activatedRoute.params
        .first()
        .toPromise()
        .then(params => {
            console.log('HERE',params)
        });
}

这样，使用toPromise() 创建的承诺在第一个params 事件中完成。

【讨论】：

很棒的答案。我添加它以获得更多类似同步的代码，您可以使用public async ngOnInit() { let params = await this.activatedRoute.params.first().toPromise(); console.log('pppp', params); }
我不得不使用await this.route.params.pipe(first()).toPromise(); - 知道为什么吗？
如果您有遵循上述代码的代码，那么这是正常的异步执行行为。如果所有代码都在 then(...) 内，则不需要 await。