javascript - Angular 2 : binding model in window. functionName 不起作用

Question

我当前的任务是将来自另一个服务的外部 JS 小部件附加到 Angular 2 项目。该小部件需要在全局范围内声明为回调的 params 函数，它将返回数据。我以 Angular 2 风格做到这一点的最佳想法是在类中描述函数(下面的代码)。

initWidget(){
  window.widgetCallback = function(result){
    this.deliveryPoint = result;
  };
  boxberry.open('widgetCallback', 'some', 'params');
}

此函数工作正常，并且 deliveryPoint 收到所需的数据，但是当我在模板中调用 {{deliveryPoint}} 时，它没有任何绑定(bind) - 变量未更新。

如何解决这个问题？

Answer 1

很难从你的问题中看出问题是什么，但我假设使用 ()=> 而不是 function () 可以解决你的问题:

constructor(private cdRef:ChangeDetectorRef) {}

initWidget(){
  window.widgetCallback = (result) => {
    this.deliveryPoint = result;
    this.cdRef.detectChanges();
  };
  boxberry.open('widgetCallback', 'some', 'params');
}