Angular2 domevents + rxjs 回调发生在 Safari 上的 NgZone 之外
Angular2 domevents + rxjs callbacks happen outside NgZone on Safari
将基于 Angular2+Polymer1 的大型客户端项目从 Angular2 beta 升级到稳定版后,我注意到 Angular 的 (eventname)
DOM 属性在使用 Safari 时触发 NgZone 之外的函数,以及 RxJS 的回调 (subscribe
, map
).
这是一个问题,因为这意味着我必须使用 NgZone.run()
调用来包装每个更改模板绑定变量的函数,仅针对 Safari 用户(iOS 和桌面),否则 Safari 用户(+ iPhone) 必须通过随机点击屏幕来触发变化检测事件。
在 Chrome 上,函数在 NgZone 内部调用(通过执行 NgZone.isInAngularZone()
验证)。
是否为 Safari 提供了更优雅的解决方案(除了使用 NgZone.run()
包装所有调用)?
上传了一个示例来重现此问题 (Angular2 + Polymer)。
https://github.com/aabluedragon/safari-ngzone-issue
更新 (11/03/2017)
我设法解决了两个问题之一 - (domevents)
在 NgZone 之外,通过在 index.html
中包含 webcomponentsjs
polyfill 而不是 angular-cli.json
的 scripts:[]
部分。
普通复制和粘贴:<script src="static/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
.
但是 Http.post
回调仍然在 NgZone
外部调用,尽管我注意到如果我简单地删除 webcomponentsjs polyfill,回调将在 NgZone 内执行!
现在这个问题只有在我使用 webcomponents <=0.7.24
时才会发生,我必须这样做,因为这是 Polymer1 所依赖的。
但是我尝试使用 webcomponents 1.0.0-rc.6
然后问题就消失了,RxJS 回调在 NgZone 中!但是 polymer1 元素(例如纸元素)不起作用,所以我仍然没有解决方案。
相应地更新了 github 中的项目示例。
在 github 上提交了一个问题:
https://github.com/angular/zone.js/issues/671
原因是 Safari 在 XMLHttpRequestEventTarget 中实现了 addEventListener,我已经发布了一个 PR 来修复它。
https://github.com/angular/zone.js/pull/672
将基于 Angular2+Polymer1 的大型客户端项目从 Angular2 beta 升级到稳定版后,我注意到 Angular 的 (eventname)
DOM 属性在使用 Safari 时触发 NgZone 之外的函数,以及 RxJS 的回调 (subscribe
, map
).
这是一个问题,因为这意味着我必须使用 NgZone.run()
调用来包装每个更改模板绑定变量的函数,仅针对 Safari 用户(iOS 和桌面),否则 Safari 用户(+ iPhone) 必须通过随机点击屏幕来触发变化检测事件。
在 Chrome 上,函数在 NgZone 内部调用(通过执行 NgZone.isInAngularZone()
验证)。
是否为 Safari 提供了更优雅的解决方案(除了使用 NgZone.run()
包装所有调用)?
上传了一个示例来重现此问题 (Angular2 + Polymer)。 https://github.com/aabluedragon/safari-ngzone-issue
更新 (11/03/2017)
我设法解决了两个问题之一 - (domevents)
在 NgZone 之外,通过在 index.html
中包含 webcomponentsjs
polyfill 而不是 angular-cli.json
的 scripts:[]
部分。
普通复制和粘贴:<script src="static/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
.
但是 Http.post
回调仍然在 NgZone
外部调用,尽管我注意到如果我简单地删除 webcomponentsjs polyfill,回调将在 NgZone 内执行!
现在这个问题只有在我使用 webcomponents <=0.7.24
时才会发生,我必须这样做,因为这是 Polymer1 所依赖的。
但是我尝试使用 webcomponents 1.0.0-rc.6
然后问题就消失了,RxJS 回调在 NgZone 中!但是 polymer1 元素(例如纸元素)不起作用,所以我仍然没有解决方案。
相应地更新了 github 中的项目示例。
在 github 上提交了一个问题: https://github.com/angular/zone.js/issues/671
原因是 Safari 在 XMLHttpRequestEventTarget 中实现了 addEventListener,我已经发布了一个 PR 来修复它。 https://github.com/angular/zone.js/pull/672