Angular 5中Chargebee回调更新组件模板变量异常问题咨询

我碰到过类似的场景，这大概率是回调函数的上下文没有正确绑定到Angular组件实例，再加上第三方库的回调可能跑在Angular变更检测周期之外导致的——虽然变量值已经修改，但模板没触发更新。给你几个可行的解决办法：

1. 用箭头函数绑定组件上下文 #

箭头函数会继承外层词法作用域的this，也就是你的Angular组件实例，不用额外手动绑定_self，这是最简洁可靠的方式：

subscribeToPlan() {
  chargebeeInstance.openCheckout({
    hostedPage: () => {
      this.publicVar = 'hosted page opened';
      console.log('hosted page');
    },
    success: () => {
      this.publicVar = 'checkout success';
      console.log('success');
    },
    close: () => {
      this.publicVar = 'checkout closed';
      console.log('close');
    }
  });
}

这样修改后，success和close回调里的this直接指向组件实例，修改publicVar后Angular能自动检测到变更并更新模板。

2. 手动触发Angular变更检测 #

如果箭头函数还是没生效，大概率是Chargebee的回调运行在Angular的Zone之外，导致变更检测没触发。这时候可以手动调用变更检测方法：

首先在组件中导入并注入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent {
  public publicVar = 'before checkout';

  constructor(private cdr: ChangeDetectorRef) {}

  subscribeToPlan() {
    chargebeeInstance.openCheckout({
      hostedPage: () => {
        this.publicVar = 'hosted page opened';
        console.log('hosted page');
      },
      success: () => {
        this.publicVar = 'checkout success';
        this.cdr.markForCheck(); // 标记组件需要变更检测
        // 或者用 this.cdr.detectChanges(); 直接触发当前组件及子组件的变更检测
        console.log('success');
      },
      close: () => {
        this.publicVar = 'checkout closed';
        this.cdr.markForCheck();
        console.log('close');
      }
    });
  }
}

3. 检查手动绑定的_self是否正确 #

如果你更倾向于用普通函数，要确保_self是在openCheckout外部定义的，绑定的是组件实例：

subscribeToPlan() {
  const _self = this; // 必须在openCheckout外部定义，确保指向组件实例
  chargebeeInstance.openCheckout({
    hostedPage: function() {
      _self.publicVar = 'hosted page opened';
      console.log('hosted page');
    },
    success: function() {
      _self.publicVar = 'checkout success';
      console.log('success');
    },
    close: function() {
      _self.publicVar = 'checkout closed';
      console.log('close');
    }
  });
}

优先尝试箭头函数的方案，一般就能解决问题；如果还是不行，再加上手动触发变更检测，基本就能搞定啦。

内容的提问来源于stack exchange，提问作者matus moravcik