2016-07-06 1 views
1

У меня есть следующая проблема с моей программой Angular 2 (версия: 2.0.0-rc.1).Угловой 2 - код не выполнен правильно в обратном вызове (сторонняя библиотека)

Мы используем Stripe, чтобы пользователи могли оплачивать кредитные карты. У нас есть функция createToken, которая вызывает интерфейс Stripe API для генерации токена, который затем отправляется в наш API. Проблема возникает в обратном вызове функции stripe.

В основном после того, как был возвращен действительный токен. Приложение просто должно показать оповещение и перейти к домашнему маршруту. Но как-то приложение застряло. 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 так или иначе, потому что использование навигационного метода маршрутизатора работает в других местах. Может быть, проблема с выполнением в обратном вызове сторонней библиотеки?

Каждый намек оценивается!

+0

Вы можете попытаться придать 'ApplicationRef' в' contructor' где ' Функция createToken'. И после того, как вы перейдете в обратный вызов, появится функция 'applicationRef.tick()' – PierreDuc

+0

@PierreDuc, по крайней мере, уведомление появляется сейчас. Но homeComponent по-прежнему не отображается. хотя маршрутизатор правильно перемещается в/ – crebuh

+1

, навигатор возвращает «обещание», попробуйте добавить 'applicationRef.tick()', чтобы затем 'then()' перемещаться следующим образом: 'this.router.navigate (['/']). затем (() => {this.applicationRef.tick()}); ' – PierreDuc

ответ

2

Сформулируем ответ тогда :)

Библиотека третья сторона вы используете, вероятно, работает за пределами zone changedetection. Существует несколько методов для решения этой проблемы, один из которых запускает цикл changeetection с использованием ApplicationRef.

Инжектируйте ApplicationRef в застройщик, как:

constructor(private _applicationRef: ApplicationRef){} 

Затем после навигации закончена выполнить tick()

this.router.navigate(['/']).then(() => { 
    this._applicationRef.tick(); 
}); 
Смежные вопросы