Question

我的Angular 2应用程序（版本：2.0.0-rc.1）出现了以下问题。

我们正在使用Stripe让用户使用信用卡付款。我们有一个createToken函数，它调用Stripe API来生成令牌，然后将其发送到我们的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();
});

Angular 2 - 在回调中没有正确执行代码（第三方库）

1 个答案: