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

Question

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

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

基本上是在返回有效令牌之后。该应用程序只需显示通知并导航到主页路线。但不知何故，该应用程序卡住了。checkoutComponent在大教堂被摧毁。路由器正确导航到家乡路由。但它永远不会呈现，通知（基本上独立于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();
});