问题标签 [ngzone]

我有一个组件：

它利用服务来获取（）和设置（）项目到本地存储：

这是HTML：

我遇到的问题是，当添加、删除新项目或以任何方式更改 localStorage（通过 cartService）时，我的 UI 没有更新 {{cartTotal}} 。我认为这可能是一个区域问题，也许在区域外处理了一些更改，并且 NgZone.isInAngularZone() 的所有实例都返回了true。我订阅了 cartService 以查看是否可以解决问题，然后启动 ChangeDetection，这也没有给我想要的结果。然后我尝试在订阅上手动强制执行 ChangeDetection ，这也不会更新我的{{cartTotal}}。我已经坚持了一天多，任何建议将不胜感激！

我有一个大型数组，我在一个组件（组件 A）中使用*ngFor了一个嵌套的*ngFor.

组件 B 初始化一个注册文档mousemove事件处理程序的 jquery 插件，我正在使用this.zone.runOutsideAngular它来初始化插件，并且我this.ref.detectChanges()在回调中调用，因为我需要更新mousemove组件 B 内部的UI。

组件 A 不是组件 B 的子组件。

一旦组件 A 被渲染，变更检测就会变得非常缓慢。数组没有改变，我正在使用ChangeDetectionStrategy.OnPush组件 A 的策略，但是当我ref.detectChanges()在组件 B 内部触发时，ngDoCheck在组件 A 上被调用，我可以看到mousemove.

有没有办法告诉 Angular 完全忽略组件 A 中的大量项目并允许我处理何时应该更新 UI？我认为 usingChangeDetectionStrategy.OnPush会给我我需要的东西，但我已经尝试@Input()从组件 A 中删除所有 s 并且任何时候我this.ref.detectChanges()在组件 B 内部调用它仍然在触发ngDoCheck，很明显这很慢。

我可以滚动浏览项目列表没有问题，但是当我触发组件 B 的detectChanges内部mousemove时会导致问题。我知道我可以手动更新 DOM，但我认为这只是一种解决方法，因为它只会解决 mousemove 上的卡顿，而不是围绕更改检测缓慢的问题。

我有一个 Angular 4 应用程序和一个组件，它们会动态生成一些标记。我需要将此组件的方法绑定到此标记中的某个元素。我发现的唯一方法是使用onclick属性生成此元素。所以现在我的组件的构造函数看起来像这样：

...我生成的标记看起来像这样：

它有效！几乎...单击按钮后，我需要window触发一些事件（例如焦点或模糊），然后我的方法才会运行。请任何人帮忙。

我有一个组件的结构

我需要使用 NgZone 更新stats.component.ts/html文件中的 myData 对象，以便在 firebase 控制台中更新 rpm、speed 或任何值时，它应该反映在我的 nativescript 应用程序的组件视图中。我希望 firebase.service.ts 中的监控函数中的 result.value 对象存储在 mydata 对象中。

Firebase 控制台屏幕截图

stats.component.html

stats.component.ts

firebase.service.ts

我正在尝试从 mongo 数据库中连续获取数据。

它需要刷新页面才能获取最新数据。

我的问题，有没有办法放置角度服务和组件来实时检查和获取数据？

我在互联网上找到的一些方法，例如：

几秒钟后在setInterval中调用服务。或者，使用第三方fireloop。

但我真的不想要这些策略。

有人可以指导我如何以及在哪里继续实现实时功能吗？

我正在使用 anuglar v4 和 mongodb v3。

谢谢。

我在使用 websocket 和实时显示更改时遇到问题。我有一系列订单。该数组来自NodeJS后端服务器，来自调用ngOnInit()my 方法orderService.getOrders()，该方法通过 REST 调用从后端获取订单。在此之后，订单将使用正确的信息呈现到模板中。

我还使用 websockets 来处理两种类型的事件：（placeOrder当通过 POST 将新订单提交给支持者时）和updateOrder（当现有订单发生更改时）。

这是该代码的相关部分：

这工作正常，如果我可以在这两种方法中看到修改后的数据，console.log()但问题是只有在刷新页面后更改才会反映到模板中。

我已经尝试使用ChangeDetectorRef并调用detectChanges()和结束handle()方法，但没有成功。

如何实现这一点并在我的模板中实时显示新订单或在不刷新页面的情况下显示对现有订单的更改？

编辑：代码的更多相关部分

单元测试 requestAnimationFrame 的方法有哪些？

requestAnimationFrame 与 setTimeout/setInterval 具有相同的性质。它也被 zone.js 修补，就像 fn 和 setTimeout 一样被修补。所以我首先想到的选择是

1. 异步 + whenStable
2. fakeAsync + 滴答（无效）
3. fakeAsync + 刷新
4. fakeAsync + 滴答（数字）
5. setTimeout(1000) + 完成（茉莉花）

结果：

1. async + whenStable ：只是不工作
2. fakeAsync + tick(void) ：不工作
3. fakeAsync + 刷新：不工作
4. fakeAsync + tick(number) ：有效（阅读下文）
5. setTimeout(1000) + done (jasmine) : 不工作

这是方法：

这是单元测试（工作单元测试）：

幻数。16 是一个神奇的数字，例如 1000/60。它是帧大小。我只是通过实验发现了这个神奇的数字。

另外，当我写这个问题时，我想到了一个想法：也许，我可以以某种方式模拟 ng zone，并且所有通过它的代码都将被同步调用（我需要那个）。我还没试过这个。

UPD：经过一些研究 RAF 调用后，只需将任务放入宏任务区域队列。如何从测试中清除此队列？

那么我错过了什么？如何正确requestAnimationFrame调用单元测试方法？

这是一个双重问题......或者一个是问题，另一个是不知道问题答案的结果......

我有一个 Angular2/4 应用程序，它开始总是在同一个屏幕上冻结...而不是在其他屏幕上...我想知道是什么导致了这个问题...但我不知道如何调试性能Angular 中的问题。有没有办法做到这一点？

除此之外......有没有关于如何避免这种情况的好习惯？我的意思是，何时何地使用 ngOnDestroy，避免/限制使用订阅/可观察对象。不使用 ngZone.. 等...

在我的应用程序中，我使用订阅从 API 调用中获取结果，用于在 URL 中发送参数（如 /product/2），也用于翻译。当我需要对父组件中的子组件进行更改时，我会使用 ngZone。

一些代码示例是：

添加一些chrome性能工具的图片：

我想在蓝牙连接完成后执行一些操作，反之亦然。
处理连接场景并添加成功和失败处理程序，并在这些处理程序函数中将标志更改为True和False。
我使用 console.log 打印了该值，它在组件文件中发生了变化，但没有反映在 HTML 中。
我尝试使用ngZone，但它不起作用。
成功和失败句柄代码如下：

蓝牙服务

组件文件

HTML

这是我的角度 html 代码。

单击按钮（updateAuthentication）时，资产匹配的asset.userId 将从myRequestResumeList 中删除。

updateAuthentication 功能完成。

但已删除的资产仍保留在角度页面中。

我想查看没有浏览器刷新按钮的更改页面。

我研究 ChangeData(Ng zone) 但对我来说很难。我不知道如何将 Ng zone 应用于我的代码。

请给我建议（简单的方法）以立即查看更改的页面