Angular2延迟更新 View

Question

我注意到使用 Angular 2 的组件有一个奇怪的行为。一旦我的组件更改了作为我的提供者包含的模型，我的 View 需要几秒钟才能更新。即使来自 API 的数据是单个数据。

例如:

我有一个名为 UserModel 的模型作为我的提供者在我的组件中，我从 API 获取数据，然后更新也在我的 View 中的模型。从服务器获得响应后，仍然需要几秒钟来更新我的 View ，有时它不会更新，就在我单击同一页面上的任何文本 Controller 之后，然后在任何文本获得焦点后更新我的 View 。

有没有人看过这个？我可能做错了什么？

卡片组件

public createCard(model:CardModel):Promise<any>{
    var context = this;
    return new Promise((resolve, reject) => {
    this.stripe.createToken(model)
        .then(function(token){
            model.token = token;
            context.saveCard("./card", model, true)
                    .then(data => resolve(data))
                    .catch(error => reject(error));
        })
        .catch(error => reject(error));
});

条纹服务

public createToken(model:CardModel):Promise<any>{
    //I get callback and convert return it as promise
    return new Promise((resolve, reject) => {
            //this function is the one from stripe.js, it is not promise
            this.stripe.card.createToken(model, function(status, response){
            if(status == 200){
                resolve(response.id);
            }else{
                reject(response.error.message);
            }
        });
    });
}

如果您注意到函数 createToken 作为回调函数返回，因为它是一个 Strip.js 函数，然后我将其转换为 Promise 以将其返回给 createCard。但是一旦所有功能完成，我的区域就不会改变。如果我删除 this.stripe.card.createToken 并使用超时返回一个简单的 resolve() ，它工作正常。所以我认为问题是什么时候在 Promise 中有一个返回回调的异步函数。但我不知道如何处理它。

Answer 1

似乎您使用的第三方库不适用于 Angular 2。我对 StripeJS 也有同样的问题。该问题与 Angular 的 Zone.js 和生命周期有关——它与 Angular 1 中的错误摘要循环问题非常相似。Angular 在此处提供了有关解决方案的详细文档:https://angular.io/api/core/ChangeDetectorRef#example-live-demo

为了解决它，您必须实现自己的生命周期循环并将您的第三方库添加到变更检测中。我对 StripeJS 的实现(还记得用 clearInterval 销毁 setInterval:

import {
  Component,
  Input,
  Output,
  EventEmitter,
  AfterContentInit,
  ChangeDetectorRef,
  ChangeDetectionStrategy,
  ViewContainerRef,
  OnDestroy
} from '@angular/core';

@Component({
  selector: 'v-payment-form', // <payment-form></payment-form>
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './payment-form.component.html'
})
export class PaymentFormComponent implements AfterContentInit, OnDestroy {
  checker: any;
  constructor(private changeDetectorRef: ChangeDetectorRef) {
    this.checker = setInterval(() => {
      // the following is required, otherwise the view will not be updated
      this.changeDetectorRef.markForCheck();
    }, 75);
  }
  addPaymentMethod() {
    Stripe.card.createToken(cardDetails)
    this.changeDetectorRef.detectChanges()
  }
  ngAfterContentInit() {
    // ..load stripe js here - I use scriptjs 
  }
  ngOnDestroy(): void {
    clearInterval(this.checker)
  }
}