角2-在回调(第三方库)中未正确执行代码

Question

我的Range2应用程序有以下问题(版本: 2.0.0-rc.1)。

我们正在使用Stripe使用户能够支付信用卡。我们有一个createToken函数，它调用Stripe来生成一个令牌，然后发送到我们的API。这个问题发生在条带函数的回调中。

基本上是在返回有效令牌之后。该应用程序只需显示一个通知，并导航到回家路线。但不知怎么的，这个应用程序被卡住了。checkoutComponent在Dom中被摧毁了。路由器正确地导航到家乡路由.但是它从来没有呈现过，也没有呈现通知(基本上独立于homeComponent的通知也没有出现)。

下面是createToken函数：

createToken(formData) {
    // Request a token from Stripe:
    Stripe.card.createToken({
        'number': formData.ccnumber,
        'exp_month': formData.exp_month,
        'exp_year': formData.exp_year,
        'cvc': formData.cvc
    }, (status, response) => {
        console.log('stripe callback', this, status, response);
        if (status.toString().charAt(0) == '4') {
            this._notes.add(new Notification('warning', this.translate.instant('notifications.checkout.stripeError')));
        } else {
            this._notes.add(new Notification('success', this.translate.instant('notifications.checkout.success')));
            this.router.navigate(['/']);
        }
    });
}

我不确定，因为我还没有遇到过类似的问题。也许这与Stripe有关，因为使用路由器的导航方法可以在其他地方工作。也许在第三方库的回调中执行有问题吗？

每一个提示都很感激！

Answer 1

让我们制定一个答案:)

您使用的第三方库可能在zone转换检测之外工作。解决这一问题的方法有几种，其中之一是使用ApplicationRef触发转换检测周期。

在构造器中注入ApplicationRef，如下所示：

constructor(private _applicationRef: ApplicationRef){}

然后在导航完成后执行一个tick()

this.router.navigate(['/']).then(() => {
    this._applicationRef.tick();
});