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

Question

我在使用 angular 2 beta RC 时遇到了一个奇怪的问题。如果我将我写入任何 angular 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分支中那样添加了下面的脚本。

angular 2 应用程序开始表现异常，某些事件更改不会被 angular 考虑，直到我手动触发另一个事件 ，我必须点击一个按钮两次才能获得正确的渲染，因为我上传到 imgur

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

Answer 1

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

如果您的第三方库使用浏览器 Promise API，则需要在通过脚本标记加载 Zone.js 之前加载它。这是为了对异步事件进行修补，以便运行在 "zone" 中 Angular 运行中。区域外的事件运行不会除非更改检测是运行手动，或者事件是运行在 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% 正确，我只是在我的 phone 上查找很麻烦。如果您不能使它工作，请 post 发表评论。

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

Angular 2 events get postponed strangely when I include some other non-angular script

events

zonejs

angular