问题标签 [change-detector-ref]

我用编译器编译了一个 Angular 模块（动态加载模块），compileModuleAsync并希望将模块的一个组件插入到视图中。

我试图将组件插入其中，ViewContainer但组件不会自动检测到更改。changeDetectorRef.detectChanges每次更新组件的属性时都应该调用。

有没有办法在不使用的情况下实现这一点changeDetectorRef？

角版本是10.0.4.

我加载组件的示例代码：

我加载另一个组件的组件：

示例模块：

调用示例detectChanges：

示例组件

我正在使用 angular 10，cdktable，我面临以下问题。

当我在表格上执行搜索时，除非我单击应用程序中的任何位置（它神奇地更新），否则我的分页不会更新...

这是一个变更检测问题，我的应用程序正在使用 onPush 策略。

现在，我的表正在从这个 observable 中获取数据

请注意，这里我正在更新项目和页面的总数。

现在，这被传递给表格组件

table.component.ts

它称自己为分页

分页.ts：

如果我遵循逻辑，则itemTotal更改将作为输入传递给table和，pagination因此它应该触发更改。

如果我这样做，一切都会奏效

但我不明白为什么这是必要的。

我预计 console.log 的序列应该是1, 3, 2，但它只打印1, 2.

我知道只有当只有更改来自模板绑定ngOnChanges时才会触发。input

所以我this.cdr.detectChanges()马上打电话，console.log(1)但它没有用。

这里有什么问题？

我在这里制作了 stackblitz 示例 - https://stackblitz.com/edit/angular-ivy-ugdba1

额外问题

如果无法触发ngOnChanges组件内部，会触发哪些生命周期钩子this.cdr.detectChanges()？

我正在尝试根据从服务发送的值更新 component.html。

在 service.ts 中：

组件.ts：

组件.html：

变量值在 ts 中更新 - 我可以在控制台中看到它，但无论我尝试什么，HTML 都没有更新。this.cd.detectChanges当值为 true 时仅更改 HTML，而当值为 false 时不执行任何操作

我有一个 Angular 应用程序，其中包含一个非常简单的所见即所得编辑器组件：

组件.html

组件.ts

我使用了一个在本例中简化为 editorLibrary 的 javascript 库，它是一个全局 js 变量，我可以在其上执行诸如初始化编辑器之类的操作。我需要 ts-ignore，因为我不只是在这个组件中导入它。

这一切都很好，除了在我初始化编辑器后渲染突然变得非常慢。当我更改一个值时，其他组件只会在几秒钟后重新渲染，而之前的更改是即时的。

我的理论是，所见即所得的编辑器库在我的文本区域旁边生成了第二个 html 元素，它有大量的子元素，我认为当发生变化时，角度会解析所有这些，这会减慢它的速度。

有没有办法告诉 Angular 完全忽略编辑器生成的元素？因为它都是 vanilla-js，所以我不需要任何 changeDetection 或变量替换，我认为如果 angular 完全忽略这些元素，我的性能会提高。我已经尝试过 changeDetectorRef.detach() 和 zone.runOutsideAngular() 并尝试使用 elementRef 添加元素，而不是直接在我的 html 文件中。渲染仍然很慢。

然而，用户界面并没有滞后，但是在更改变量后从角度更新只会花费大量时间。有没有其他方法可以调试这个原因？（也许是高级日志级别，我可以看到 Angular 在后台做什么）或者有没有人知道我如何告诉 Angular “这个 html 是纯 js，你不需要看它，解析它，改变它甚至知道它的存在”

“初始化.ts”

“home.module.ts”

“home-app.component.ts”

“home-feed.component.ts”

“home-feed.html”

这是我的流程的基本实现。我最初是路由到我的 HomeFeedComponent，但是一旦我在我的初始路由上到达那里。即使 display 等于 true （我什至从组件控制台记录它）我的前端也不会呈现类“活动”，除非我添加this.ChangeDetectorRef.detectChanges();到clickyClick.

但是，当我在默认路由之后路由回该组件时，无需detectChanges.

问题：所以我很想知道我在这里做错了什么，为什么我必须detectChanges在最初路由时手动触发？这是一个 Angular 错误还是我的逻辑有问题？

提前致谢！

I'm getting the ExpressionChangedAfterItHasBeenCheckedError error from my child component. I tried to add detectChanges() method inside the ngOnchanges but it didn't work. I'm new to angular. I also tried the other questions' solutions but didn't work for me.

我有一个在实时页面中使用的组件，我一直保持分离：

在模板内部，我使用了一个不纯的管道（非常类似于async管道）isAuthorized，它订阅了一个 observable 并调用ChangeDetectorRef来触发更新：

像异步管道一样，这在“正常”组件和ChangeDetectionStrategy设置为OnPush.

但是，如果我在组件分离时尝试使用它，它将完全排除在更改检测之外，因此调用markForCheck无效。

理想情况下，我想让管道检测到组件已分离，并调用this._ref.detectChanges()而不是markForCheck. 如果组件未分离，
我不想打电话，以免弄乱“正常”更改检测流程。detectChanges

有任何想法吗？

我在 Angular v5 上，正在编写浅层组件测试。当 karma 运行测试时，我收到一个错误：

当我运行应用程序并手动执行测试场景时，不会发生此错误。我确实做了一些调试，我的 html 中的以下行导致了错误：

IsFast是一个布尔属性。不知道为什么只有在运行测试时才会导致错误。我只能想象我的测试中有一些东西没有正确设置，因为当我运行应用程序时我没有收到任何错误。

我是一个团队的一员，并试图让我们开始测试我们的 Angular 代码。在我的测试中我需要做些什么来完成这项工作吗？在组件中添加/修改代码只是为了让测试通过，这对我的团队来说是一个很难的卖点，但如果这是让它工作所需要的，那就这样吧。老实说，我觉得我不知道角度测试的某些方面，这就是我收到此错误的原因。

这是我的模板的相关部分：

这是我的测试代码：

有没有办法找出组件实际使用了哪个 changedetectionStrategy 。我有一个非常大的角度应用程序，它在外部组件上使用 onPush，所以一切都应该使用 onPush。

但是当在一些子组件上额外应用 onPush 时，性能会有所提高。

当鼠标以几乎完全相同的时间和距离移动时，该屏幕截图显示了 changeCycles。