问题标签 [angular-changedetection]

我的 Angular 应用程序落后于<input>领域，特别是<textarea>那些领域。我使用 chrome 开发工具检查了正在发生的事情，我发现我输入的每个字符都会刷新整个组件树。

我从模板驱动的表单开始，转向响应式表单，尝试更改为“OnPush”更改检测，runOutsideAngular（我不确定我是否采用了最好的方法，因为我在其中创建了formGroup它），似乎没有任何效果。

当焦点在输入字段上时，有什么方法可以阻止这些更改？

谢谢。

我有一个输入并且在去抖动（完成输入后半秒）我正在设置一个变量。我希望这个变量改变一些 html。它有效，但只有在我完成输入后，然后输入并重新开始。所以在第二次绕过它就可以了。我希望它在第一次发生。

这是我的html：

和我的 ts：

所以在上面，<loader></loader>只有在第二次去抖动之后才会出现。这很奇怪，因为我立即将变量设置为 true。

• debounceTime 来自 rxjs 运算符，import { debounceTime, takeUntil } from "rxjs/operators";基本上在设定的时间（500 毫秒）之后它将触发.subscribe函数中的任何内容。

我尝试使用更改检测器 ref 并检测订阅功能中的更改，但它对我不起作用。

我有一个问题，其中（很好的）答案举例说明了如何允许输入框获得焦点（通过请求运行更改检测，以防在焦点分配时组件不可见）。

现在，我面临着类似的问题。我在包含来自另一个组件的输入框的组件的字段中设置值。它的工作原理是我可以看到正在显示的输入框和隐藏的只读标签。但是，输入框没有被关注。

我怀疑它的原因是相同的，或者最不相似。但是，由于我是从组件外部设置值，因此我不能再依赖于将其作为视图子项进行访问，就像我在单击处理程序的情况下所做的那样。

什么是接近它的适当策略？

通常的谷歌搜索没有提供有用的链接。我没有提供样本，因为坦率地说，除了用文字描述之外，我不知道如何说明这个问题。

我将 ngModel 值绑定到角度百分比管道，更新 ngModelChange 并将 updateOn 设置为模糊。它工作得很好，除非再次输入相同的值。再次输入相同的值时，管道不会检测到更改，并且该值显示为小数而不是百分比。我曾尝试将百分比管道重新创建为不纯管道，但这不起作用。即使值与以前的值相同，如何强制管道检测更改？

尝试让管道返回WrappedValue.wrap(this._latestValue)；

尝试this._ref.detectChanges()在更改功能中运行

期望值以百分比格式显示。重新输入后显示十进制值。

我的 Stackblitz 代码

我正在尝试将应用程序迁移到使用ChangeDetectionStrategy.OnPush. 但是，我在尝试使用一些反应形式时遇到了一些障碍。

我有一个可重用的控件，它根据一些状态标志（例如*ngIf="control.touched && control.invalid"）显示验证消息。我遇到的问题是无法检测touched标志何时更改，因此无法使用ChangeDetectorRef.

它可以通过监听click事件来引用输入元素本身来完成，但这并不能说明何时markAsTouched()使用，并且传递对元素的引用并不总是可能的，而且总是不雅的。

有没有一种方法可以使用OnPush并且仍然响应表单控件状态（例如touched），或者它只是通常很痛苦？

我正在尝试使用自定义逻辑将活动类应用于我的路由，routerLinkActive但由于某种原因无法正常工作（可能是我的父路由和子路由是动态的）。这是代码：

我的路由文件如下所示：

当我加载页面时，我收到以下错误：

ServicesComponent.html:10 ERROR 错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：“活动：假”。当前值：“活动：真”。

我尝试使用AfterViewInit, AfterViewChecked，但无济于事。

我哪里错了？

在 Angular 7 中创建自定义组件时，跟踪数组更改的最佳方法是什么？

例子：

另外，有没有更好的方法来做到这一点（比如 observables 等）？为什么？

我想在使用 OnPush 更改检测策略上传之前预览多个图像。

我试试这个 https://stackblitz.com/edit/angular-mnltiv

当我添加 OnPush 它停止工作时，我知道我应该以不可变的方式更改数组但不工作

我希望 OnPush https://stackblitz.com/edit/angular-4jmjzh

我有 3 个组件

1. main.component.html
2. mobile-main.component.html
3. 桌面-main.component.html

根据设备宽度，我想使用 MediaMatcher 和 ChangeDetectorRef 加载不同的视图（完全不同的 UI）

我的问题是使用matDatepicker时它无法正常工作。当我更改方向时，桌面/移动 UI 加载正常，但是当我单击日期选择器时，更改方向后它没有弹出（但从第二次单击开始弹出）。

我们可以使用 chrome toggle-device-toolbar 来模拟。

main.component.html

主要组件.ts

mobile-main.component.html

移动主组件.ts

桌面-main.component.html

桌面-main.component.ts

我已经在 Angular 7 应用程序中实现了一个下拉控件，并且在值更改时，我正在过滤集合并将其分配给绑定到视图的对象。我正在过滤的集合对象称为FundTerms，我分配的绑定到视图的对象称为 Fund。我已经在编写过滤逻辑的组件中实现了值更改事件。

我可以看到valueChanged事件被触发并执行了逻辑，但 UI 没有反映VehicleType字段中更改的值。

我在视图中有两个控件。一个是下拉控件，即名称，另一个是根据在名称控件的下拉列表中选择的内容VehicleType显示的字段。VehicleType

零件

看法

JSON