问题标签 [ngzone]

嗨，我无法测试 runOutsideAngular 中的代码我得到 component.dateFormat 为未定义任何想法如何解决它？

这是我的单元测试

我有一个需要在NgOnInit方法中设置和获取数据的 Angular 组件。

然而，由于时间的原因，数据的设置和数据的检索会有轻微的延迟。我想用NgZoneor解决这个问题，ChangeDetectionRef但我不确定该怎么做。

我不想使用设定的间隔或时间延迟。

我在constructor.

在我的服务方法中，如果尚未在 Chrome 存储中设置数据，我会加载数据。

然后我检索我的OnInit方法的数据：

但是延迟导致我的对象为空。有人能用NgZoneor帮助我解决这个问题ChangeDetectionRef吗？

我正在尝试在 StackBlitz 中运行一个有角度的应用程序。它工作正常，直到我尝试添加一个mat-sidenav-container. 然后应用程序开始失败，控制台中显示以下错误：

这是相关 StackBlitz 的链接：https ://stackblitz.com/edit/angular-7cazwh?file=src%2Fapp%2Fapp.component.html

这是html代码。如果我注释掉指定的部分，它会起作用。我如何让它工作？谢谢。

我有一个 Angular 应用程序，用户按下按钮并触发动画。基本上它是两张图片相互切换以创建运行错觉。

起初，当我们开始玩时，我的角色仍然是，它的图片有动画效果，但随着它的动画效果，我得到：

ExpressionChangedAfterItHasBeenCheckedError

我的html：

我的TS：

我的错误代码：

错误：NG0100：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。“src”的先前值：“https://i.ibb.co/JtQm93b/dino-3.png”。当前值：'https://i.ibb.co/x3JdgFf/dino-4.png'..

我知道这与变更检测有关。我已阅读有关ngZone它如何跟踪更改的文档，setInterval()并将其添加到我的代码中但没有成功：

这是我的问题的有效 StackBlitz。我应该如何实施 ngZone 这样我就不再得到ExpressionChangedAfterItHasBeenCheckedError了？

在测试应用程序中，有一些组件在向所有订阅者发送通知时会更新数据。我使用 SHARED_STATE 注入令牌来引用能够同时提供 Observer 和 Observable 接口的 Subject 对象，因此我可以使用 next() / subscribe() 方法。

在 ShareState 对象的 subscribe 方法中，我正在制作 Message 对象，该对象转到 messageService 的 reportMessage 方法：

应用程序使用消息组件显示消息：

接收 SHARE_STATE 通知的 next() 方法是从另一个组件调用的 => TableComponent：

并且有来自自定义错误处理程序的调用：

当我按下创建/编辑产品按钮（来自 TableComponent 的 createProduct / editProduct 方法）时，角度触发更改检测过程并且消息组件的内容被重新呈现，但还有一个按钮专门创建以这种方式处理的 http 错误：

但是当我按下导致 http 错误的按钮时，消息组件没有被渲染/重新渲染，但是，我看到消息组件的 lastMessage 属性值发生了变化，当我在浏览器的控制台中访问这个变量时，我可以看到它：

当我开始在右侧的表单中选择输入区域时，Angular 会触发更改检测过程并重新呈现消息组件：

当我 this.state.next(new SharedState(MODES.ERROR, undefined, msg))将这行代码包装到 NgZone.run 方法中时，问题就解决了。我知道角度变化检测过程依赖于 Zone 库，该库修补 Web API 以提供生命周期钩子，并且角度定义了 ngZone 服务以基于这些钩子自动触发变化检测。

我想问的问题是：

1. 为什么创建/编辑具有类似功能的按钮在“角度”区域内执行，但错误处理代码需要我重新进入区域以自动触发更改检测？

2. 在编写代码时，我怎么知道这段代码将在“角度”区域内执行，何时不执行？

谢谢你。

启用角度选项后ngZoneRunCoalescing，当不可见时，所有更改检测都将停止，因为NGZONE选项shouldCoalesceRunChangeDetection依赖于requestAnimationFrame触发下一个更改检测。

...当在后台选项卡或隐藏 iframe 中运行时，大多数浏览器中的 requestAnimationFrame() 调用都会暂停...

Window.requestAnimationFrame

因此，依赖更改检测来开始或完成工作的组件将被阻止，直到页面变得可见。在这种情况下，尝试在单独的窗口/选项卡中打开加载时间较长的 Angular 应用程序以使其在后台加载的用户将不会在加载过程中取得任何进展。如果您右键单击并在新选项卡中打开，直到启用引导选项后该选项卡变得可见，任何具有依赖更改检测才能继续的可视化组件的 Angular 应用程序都不会加载：

这是一个显示问题的最小应用程序运行 SimpleApp - SimpleApp 源。如果您在新选项卡中打开此选项卡，则在选项卡可见之前不会开始计数，但如果您关闭ngZoneRunCoalescing并在新选项卡中打开，如果您将选项卡隐藏足够长的时间，则计数会开始并一直持续到最后。

• 是否有一种方法可以在隐藏选项卡时保持动画帧在浏览器上运行？
• 或定期手动触发动画帧？
• 或在ngZoneRunCoalescing选项卡隐藏时更新选项？
• 或任何其他想法？

就我而言，我正在开发一个应用程序，该应用程序从可能较慢的外部连接读取数据，然后创建一堆组件，每个组件进一步处理和可视化接收到的数据，可能会创建更多组件。这些组件依赖 Angular 生命周期来接收输入绑定并通过服务进行多次更新，有时还依赖其他组件的输出来进一步处理数据，然后才能渲染。这一切都被阻止，直到选项卡变得可见。

如果没有ngZoneRunCoalescing，用户可以在单独的选项卡中打开应用程序，并允许它在执行其他工作时在后台加载，但是打开此选项后，应用程序会坐在那里并且在选项卡变得可见之前不会开始加载。

我真的很想使用这个选项，因为我看到它打开后加载性能提高了 10-30%（只要页面在整个加载过程中可见）

我在单个父组件中添加了三次相同的子组件

下面是在其中一个子组件上调用的更改函数，以更改selectedName其他两个子组件@Input中的字符串类型，如果我将其更改为对象，它可以正常工作。

这就是子组件的样子