angular - 角度重新渲染和 changeDetector

Question

我是 Angular 开发的新手，并且肯定会错误地使用它。我所看到的是，Angular 重新渲染没有按预期发生，而是被其他事件触发。

当我开始在页面上构建组件时，它按预期工作，但在某处重新渲染部分变得不稳定。

这里有些例子。这些都在同一个 SPA（单页应用程序）上 (1) 我有一个 mat-table，它使用 graphql 从后端获取它的数据。表正确加载。但是在呈现时（使用cdkObserveContent表格的属性绑定），代码以编程方式选择表格中的第一行，并在页面的另一个配套组件中显示详细信息。第一行的选择最初可以正常工作，但在dev过程中的某个地方它停止了工作。如果用户将鼠标悬停在表格标题上，第一行会突然被选中，并且伴随组件中的详细信息将正确突出显示。

看起来 Angular 并没有自动重新渲染它，并且需要在列标题上的鼠标悬停事件来重新渲染。我最终在 cdkObserveContent 处理程序的末尾添加了一个 ChangeDetectorRef.detectChanges() 调用，以使其正常工作。(2) 在 (1) 的配套组件中，我有可变数量的扩展面板。

这些最初在扩展和折叠方面工作得很好，但随着开发过程的发展，它们再次显示出与 (1) 相同的行为。单击展开面板标题将不再导致它们展开或折叠。在应用程序中的其他位置单击后会导致先前单击展开标题，以展开/折叠面板。即使打开/关闭开发控制台选项卡 (Ctrl-Shift-I) 也会导致重新渲染发生。没有别的，不管我等多久。将 ChangeDetectorRef.detectChanges() 调用到单击处理程序以解决扩展问题也解决了此问题。不知道如何或为什么，但确实如此。

(3) 目前我正在处理这个我还没有解决的问题。在 (2) 中的配套组件中，我有一个按钮来启动一个 mat-dialog。同样，通过开发过程，它运行良好。准系统对话框将按预期启动和关闭。但是现在我已经接近完整的功能，对话框不会通过提交和/或关闭按钮关闭。

我需要调用 (Ctrl-Shift I) Dev 控制台选项卡以关闭对话框。我还没有想出一种编程方式来做到这一点。ChangeDetectorRef 似乎无法解决此问题。

不太确定在这里发布什么代码。希望有人以前经历过这种情况并且知道我需要直接设置的一两个简单设置。

任何帮助深表感谢。

标签： angular