问题标签 [angular-changedetection]

对一篇关于zone.jsAngular2+ 的文章有疑问。我正在阅读blog.angular-university.io 的一篇文章。我认为有些部分有点神秘，并且有一些问题，我不确定我是否理解正确。文章指出：

一个区域只不过是一个执行上下文，它可以在多个 Javascript VM 执行轮次中幸存下来。

上述语句是否意味着堆叠在事件队列中的多个异步回调具有一个执行上下文，因此具有相同的值this？

这是一种通用机制，我们可以使用它来为浏览器添加额外的功能。Angular 在内部使用 Zones 来触发变更检测。

Angular 正在运行时更改async函数（settimeout、AJAX 等）。这是否意味着除了完成回调的回调之外，Angular 还可以使用其他功能来检测更改

我现在的理解正确吗？如果不是，有什么问题？

当订阅中的变量更改时，为什么视图没有更新？

我有这个代码：

例子.component.ts

example.component.html

但视图显示：foo-Hello。

为什么不显示：foo-Hello-bar？

如果我ChangeDetectorRef.detectChanges()在订阅中调用它会显示正确的值，但是为什么我必须这样做呢？

我不应该从每个订阅中调用这个方法，或者根本不应该（角度应该处理这个）。有正确的方法吗？

我错过了从 Angular/rxjs 5 到 6 的更新吗？

现在我有 Angular 6.0.2 和 rxjs 6.0.0。相同的代码在 Angular 5.2 和 rxjs 5.5.10 中运行正常，无需调用detectChanges.

当我拖动组件的根元素时，假设组件中存在拖动侦听器，例如：

每次事件发生时，变更检测也会发生，因为事件是异步操作。

但是，当手动触发拖动事件时，我似乎无法进行更改检测。

这将调用拖动侦听器，但不会触发更改检测。

为了清楚起见，我知道我可以手动触发事件，然后detectChanges()也可以手动调用，但我希望事件能够像在现实生活中一样触发更改检测。

我正在尝试在 mat-dialog 弹出窗口中过滤对象列表。我的实现基于这篇非常好的帖子，以避免在每个 keyUp 事件中运行 Angular 更改检测。

实施过滤器后，我在ngDoCheck更改检测周期中使用控制台日志进行了验证。似乎每个 keyUp 事件都触发了几个更改检测周期。

我弄清楚了我作为示例的帖子和我的帖子之间的区别：我在一个 Material Dialog 组件中。

我准备了一个stackblitz 示例来展示它。被FormComponent集成两次，一次直接在 中AppComponent，一次在 中mat-dialog。打开您的控制台并观察cd和filtering字符串，它们分别记录更改检测周期和项目过滤。您会注意到，当您使用对话框版本时，有大量的cd.

完整代码在这个地址

有没有办法在 mat-dialog 中停用更改检测？如果是，有什么副作用？

MatDialog 的 API 不包含任何与我正在搜索的内容相似的内容...

请注意，我的代码确实可以正常执行，但是大量的更改检测周期可能会降低较慢设备上的应用程序性能。

希望有人能帮忙！

编辑

根据评论，我尝试将 ChangeDetectionStrategy 切换为onPush（这不应该有任何副作用，因为绑定是使用在去抖动时间后重新分配的过滤列表执行的）。然而，这无济于事。

我还尝试使用以下代码将我的组件与更改检测分离：

我试图禁用我的组件的检测更改（保持触发过滤器的输入），但似乎在每个keyUp事件中仍会多次调用更改检测挂钩。

我怀疑mat-dialog组件会将自己注册到keyUp事件中以获取可访问性快捷方式并触发更改检测。随时分享您的想法。

我有一个场景，我OnPush在 Angular 中有 @Input-less 组件。如果我打电话markForCheck()，我的组件模板中的视图绑定将被检查？

我的意思是，我的组件是OnPush并且markForCheck()标记了所有要检查的祖先，并且因为我的组件没有@Input，所以 Angular 在这里的行为是什么？Angular 会跳过检查组件的视图绑定还是总是检查？

我正在对 Angular2 中的数组执行过滤操作。当数组中的元素更改时，不会触发纯管道。因此，我必须使用不纯的管道或使用组件内部的函数进行过滤，如下所示。

或者，

据我所知，在模板中绑定一个函数在性能方面很糟糕。但是，我看不出使用不纯管道而不是函数有什么区别。我想知道的是，上面这两种方法的性能有什么区别吗？

我希望能够使用组件构建一个反应式表单，但不是将其全部设置在单个父组件中。所以我创建了初始值FormGroup并将其传递给组件，然后组件this.form.addControl(this.fb.group({ ... }));将它们的组添加到表单中。

例子

父组件

子组件

这一直有效，直到我尝试并在父组件this.form.get('childGroup').patchValue({ ... })的生命周期钩子中发出请求之后。ngAfterViewInit它不会修补组，而是抛出：

有没有办法让子组件将自己添加到 aFormGroup中，而不是让父组件设置FormGroup控件和验证。我们需要在应用程序中以不同的方式和组合重用子组件，因此不想FormGroup在子组件之外不断重复声明，但这似乎不起作用。

我正在学习 zone.js 猴子如何修补 browseraAPI（基本上是异步任务），并使用 fork 挂钩来通知活动何时开始和结束。

setTimeOut 是 browserAPI 不是 javascript 的东西，所以 Zone 可以修补它，但是 onclick、onkeydown....... 事件呢？根据我的理解，区域仅修补浏览器 API，然后当我单击按钮或按下按键或任何用户交互时如何触发更改检测？

或者我的理解是错误的。区域可以修补任何事件吗？

给定一个项目列表（将其视为与多条消息的聊天），我想使用moment.js来显示每个项目的相对时间（例如自创建以来）。

每个项目都有自己的组件，并且使用以下代码显示相对时间：

问题是组件不会更新相对时间的显示，因为原始输入（pageLoaded在上面的示例中）不会改变。

我的问题是：是否有处理这种情况的最佳实践？目前，我正在使用markForCheckofChangeDetectorRef来触发重新渲染。但是，我不确定这在性能方面是否是一种好的方法。

我在 Stackblitz 创建了一个简单的演示。在演示中，我使用上述markForCheck方法来触发更新。

如果组件只有原始值绑定但使用 ChangeDetectionStrategy.OnPush，是否有任何性能优势？或者在这种情况下可能有一些缺点？

示例用例：