问题标签 [zonejs]

在 AngularJS 2 中，大多数与区域相关的示例和文章都以zone对象和函数为中心，例如zone.fork和zone.run。例如，这篇文章和这个视频关注的zone对象。

但是 AngularJS 2文档提供了一个名为 NgZone 的类。我想使用onTurnStartand之类的方法onTurnDone，但我找不到使用这些方法的任何示例。我应该费心使用这个类吗？

我现在正在开发一个 Angular2 应用程序几个星期，几天前我遇到了这个问题。

该问题发生在 rxJS 流上第一次调用 subscribe 或 toPromise 时，并且似乎根本没有破坏应用程序的行为。然而，它确实抛出了浏览器的控制台输出，并且似乎阻止了调试（因为 zone.js 和应用程序之间的连接丢失了？）

无论首先加载哪个订阅，无论在 Google chrome 和 firefox 中，都会发生这种情况。

如果我得到更多信息，我会尝试更新这个问题，但目前这就是我所知道的。

非常无用的堆栈跟踪：

考虑以下组件树结构Angular2

如果D通过 click to 发出事件B，angular2将自动从 root 开始更改检测A。console.log即使D没有直接向 发射事件，有没有办法检测到变化A？

例如在D

html

component

在B

但如果B没有进一步推进该事件，我无法判断是否A正在运行其更改检测。

这样做的动机是找出哪个组件已在Change Detection运行以进行调试

在尝试在 Angular2 应用程序中嵌入 Google Maps (API v3) 小部件时，我发现有一个让我感到不安的单击/拖动错误。

我想知道是否有一种好方法可以嵌入与 Angular 隔离的 Google Map 组件。根据堆栈跟踪（如下），在 Zone 尝试调用任务后，Google 地图似乎遇到了意外情况。

简单的 Plunkr 示例（可运行）：https ://plnkr.co/edit/Tg3zwphygrgLUG5mq8Cc

每次点击错误后的回溯（在 README.md 中）：

HTML (index.html):

Angular2 准系统应用程序 (main.ts)

观察：

• 每次点击都会触发错误
• 错误似乎无关紧要，但最好不要在不稳定的基础上进行
• Stacktrace 建议 Google Maps (_.r.jl @ common.js:244) 对 Angular2 的 Zone (ZoneDelegate.invokeTask @ angular2-polyfills.js) 调用的任务感到惊讶
• 该小部件在一个简单的应用程序中工作，但在 Angular 中抱怨

我正在研究 angular2 "2.0.0-rc.1" 但是 zoneJS 给出了以下错误

我的代码如下

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

以 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 构建捆绑包，但没有成功。

我有一个使用 Google Maps JavaScript API 的 Ionic 2 beta 7 应用程序（也发生在 Beta 6 中）。

如果我在地图上单击，拖动它并在释放单击之前“扔”地图，它会导致在下次尝试拖动地图时发生此错误。

这是 JavaScript 堆栈跟踪

TypeError：无法在 Object 处读取 .r.Kj（https://maps.googleapis.com/maps-api-v3/api/js/25/7/common.js:215:70）处的 null 属性“ca” . .B.trigger ( https://maps.googleapis.com/maps/api/js?key=MYKEY:93:119 ) 在 dy ( https://maps.googleapis.com/maps-api-v3/api/ js/25/7/common.js:164:140）在。( https://maps.googleapis.com/maps-api-v3/api/js/25/7/common.js:163:441 ) 在 Object._.B.trigger ( https://maps.googleapis. com/maps/api/js?key=MYKEY:93:119 ) 在.r.dl ( https://maps.googleapis.com/maps-api-v3/api/js/25/7/common.js: 228:350）在千伏。.r.fm (https://maps.googleapis.com/maps-api-v3/api/js/25/7/common.js:195:106 ) 在 ZoneDelegate.invokeTask ( http://localhost:8100/build/js/zone .js:356:38 ) 在 Zone.runTask ( http://localhost:8100/build/js/zone.js:256:48 ) 在 ZoneTask.invoke ( http://localhost:8100/build/js/zone .js:423:34 )

尽管从用户的角度来看，它似乎不会导致任何 UI 问题，但最好知道是否有办法防止这种情况发生？

笔记

当鼠标静止时拖动地图并释放它，下次拖动时不会出现此错误。

Plunker 示例

我创建了一个复制问题的Plunker 示例。按着这些次序：

1. 打开Developer Tools(F12)
2. 拖放地图
3. 再次尝试拖动地图
4. 抛出错误并写入控制台

更新

问题堆栈跟踪和标题已更新以匹配 Ionic 2 beta 10 中捕获的内容

在 GitHub 上跟踪

此问题已在 ZoneJS GitHub 页面上提出，因此您可以在此处跟踪它

我正在使用 karma 和 jasmine 构建一个用于单元测试的 ionic 2 应用程序，但在运行单元测试时突然出现此错误。

有人知道问题出在哪里以及问题出在哪里吗？

马汀

我需要一些关于 Angular2 RC1 Web 应用程序中外部更改的 DOM 的帮助。场景很简单：我确实有一个带有相应模板的组件，其中包含一个带有这样 ID 的空 div

typescripted 组件有一个 ngOnInit 方法，该方法从一个普通的 JS 文件触发一个函数，该文件通过 index.html 中的 script-tag 包含。该函数将 SVG 渲染到上面列出的“div”标签中。SVG 包含一些带有点击指令的 a 元素，这些指令引用了我的组件中的几个方法。

在 SVG 完全编写后调用 $scope.$apply() 之后，这在 Angular1 中运行良好。现在，在 Angular2 中，我的组件中的各个方法都没有被触发。

我知道，ZoneJS 现在负责检测 DOM 中的变化。我希望这对于在 Angular 管理的组件中呈现的整个 DOM 自动完成。接下来的尝试是在我的组件中注入 NgZone 并在其中显式运行渲染函数，如下所示：

也没有成功：-/ 此外，我注册了一个 MutationObserver（请参阅此线程：Angular2 Directive: How to detect DOM changes），因为问题的发生与我有点相似。不过，它也没有被解雇。

我不知道在哪里寻找，没有错误信息可以坚持:-???

注意：必须使用“on-click”而不是“(click)”，因为 SVG 渲染框架拒绝设置无效属性。显然，以括号开头的属性适用于 HTML，但不适用于 XML。但是，这不应该是问题，因为这两个指令都是完全可交换的。

PS：

调用的渲染方法使用 SVG.js 框架，如下所示：

以及 SVG.js 库生成的标签

当我将生成的 SVG 代码粘贴到我的模板中时，一切正常。

这实际上是从这里衍生出来的，不过用例要简单得多。它是关于如何让 Angular2 知道有外部添加的包含 Angular 指令的 DOM 元素。在这种情况下，我添加了一个新的单击按钮，其单击事件永远不会被绑定。我认为 Zone 会自动检测其组件模板中的任何更改，显然它不会。有没有人能够使该代码工作而无需为按钮创建一个新组件并通过加载它的巨大开销DynamicLoaderComponent？

注意：我已经添加了NgZone和ChangeDetectorRef玩弄。都不适合我。

这是 plunkr 上完整示例的链接：plnkr.co/edit/hf180P6nkxXtJDusPdLb

这是该组件的相关摘录：