javascript - Angular2 应用程序问题 - 必须执行该函数两次，才能强制显示更改

Question

首先看看我的plunker:

https://plnkr.co/edit/5x76J6i0rm5mmDRDO9QP

打开控制台并尝试单击并拖动轴。当您点击并移动轴时，将执行以下功能:

plot.on('plotly_relayout', () => {
  console.log('relayouted');  
  this.someVar = false;
});

正如您在控制台中看到的，它记录了relayouted消息，但someVar仍然没有改变。

但是(这里出现了奇怪的、意想不到的部分) - 如果您再次单击图表(您甚至不需要拖动它)someVar 将是最后变成了 false。 (如我所愿)

我的问题是，我想在函数执行后立即更改 someVar 值。

这很奇怪，因为当图表重新布局时，console.log 会立即被记录，但变量不会发生这种情况。

为什么我要执行该函数两次才能强制显示更改？

谢谢。

EDIT1:如果您尝试 console.log 该变量:

plot.on('plotly_relayout', () => {
  console.log('relayouted');  
  this.someVar = false;
  console.log(this.someVar);
});

它会在第一次执行时记录false。所以这将是某种悖论，因为变量是假的，但在 View 中它显示为真!奇怪...

Answer 1

当您监听外部库事件时，您必须确保您在 Angular 上下文中运行的事件内部。

试试这个:

从@angular/core导入NgZone

然后将 public zone: NgZone 添加到您的构造函数中，最后将您的代码替换为下一个。

 let plot = document.getElementById('plotly');
    plot.on('plotly_relayout', () => {
      this.zone.run(() => {
        console.log('relayouted');  
        this.someVar = !this.someVar;  
      }); 
    });

这是您的修改器:https://plnkr.co/edit/Zqvxpv5tyQ0AIIK7Iapw?p=preview