0

我在使用 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

在此处输入图像描述

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

4

2 回答 2

1

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

对于使用浏览器 Promise API 的第三方库，需要在通过 script 标签加载 Zone.js 之前加载它。这是为了修补异步事件，使其在 Angular 运行的“区域”中运行。除非手动运行更改检测，或者事件在角区。

于 2016-05-16T17:10:20.480 回答
0

正如布兰登所解释的，让代码在 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% 正确，我只是在使用手机，查找起来很麻烦。如果您无法使用，请发表评论。

于 2016-05-16T18:44:51.820 回答