当我包含一些其他非角度脚本时，Angular 2事件会被奇怪地推迟

Question

使用angular 2 beta RC时遇到了一个奇怪的问题。 如果我包含我写入任何角度2项目的外部脚本，事件就会被推迟：

<script>
  (function(r,a,k,e,y,o,u){r['RakrWidgetObject']=y;r[y]=r[y]||function(){
  (r[y].q=r[y].q||[]).push(arguments)},r[y].l=1*new Date();o=a.createElement(k),
  u=a.getElementsByTagName(k)[0];o.async=1;o.src=e;u.parentNode.insertBefore(o,u)
  })(window,document,'script','//cht.technology/rakr.js','rakr');

  rakr('//localhost:3000', 'RAKR-000001');
</script>

以github项目 thelgevold / angular-2-samples 为例，我在https://github.com/tan9/angular-2-samples/tree/event-postponed分支中添加以下脚本。

角度2应用程序开始表现奇怪，某些事件更改将不会被角度考虑到我手动触发另一个事件，我必须单击一个按钮两次以获得正确的呈现方式这个录音我上传到imgur

我不知道我写的外部脚本发生了什么，这是一个只依赖于html2canvas和es6-promise的简单项目，它可以使用html2canvas捕获屏幕截图并将其发送到另一个Web服务。该包是由webpack构建的，我尝试使用browersify构建捆绑包，没有运气。

Answer 1

这是对Zone.js如何工作的一个警告。 Zone.js修补异步浏览器事件，并提供一个API，Angular使用该API来确定何时发生更改以及何时运行更改检测以更新UI。

对于使用浏览器Promise API的第三方库，需要在通过脚本标记加载Zone.js之前加载它。这样就可以对异步事件进行修补，使其在Angular运行的“区域”中运行。除非手动运行更改检测，或者在上下文中运行事件，否则将无法获取在区域外运行的事件。角区。

Answer 2

正如brandon所解释的那样，让代码在Angulars区域内运行

注入NgZone

constructor(private ngZone:NgZone){}

...

this.zone.run(() => ... /* code here that modifies Angulars model from the outside */);

你也可以在Angular之外获得区域

bootstrap(AppComponent, ...).then((ref => ref.instance.injector.get(NgZone));

（不确定这是否100％正确，我只是在我的手机上查找是很麻烦的。请发表评论，如果你不能让它发挥作用。