问题标签 [angular2-changedetection]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
4 回答
24929 浏览

angular - Angular2 ngFor OnPush 带有数组突变的变化检测

我有一个数据表组件(angular2-data-table)项目,我们将项目从 Angular 的传统变更检测更改OnPush为优化渲染速度。

实施新的变更检测策略后,当数据对象发生突变(例如对象的属性更新)时,引用表未更新的错误被提交参考:https ://github.com/swimlane/angular2-data-table/issues/ 255 . 可以为这种类型的需求创建一个强大的用例,例如在线编辑或对大型数据集合(如股票代码)中的单个属性进行外部数据更改。

为了解决这个问题,我们添加了一个自定义 trackBy 属性检查器,名为trackByProp. 参考:提交。不幸的是,这个解决方案并没有解决问题。

在实时重新加载下的演示页面上,您可以看到上述提交中引用的演示正在运行,但在您单击之前不会更新表,从而触发更改检测。

组件的结构类似于:

Table > Body > Row Group > Row > Cell

所有这些组件都实现了OnPush. 我在行设置器中使用 getter/setter 来触发页面重新计算,如此处所示

我们希望OnPush为那些实现这种模式的人提供变更检测,但是,作为一个拥有多个消费者的开源项目,人们可能会争论某种自定义检查功能,以检查屏幕上的可见行值。

综上所述,trackBy没有触发行单元格值中的更改检测,实现此目的的最佳方法是什么?

0 投票
1 回答
908 浏览

angular - 离子模态变化检测

我有一个使用离子模式来修改专辑变量的组件。

我尝试使用 and 强制更改检测ChangeRefDetector markForCheck()detectChanges()然后尝试使用 angular Zones,但是当onDidDismiss()被调用时,该组件的视图不会更新。有什么想法吗 ?

编辑:这是模式代码:

}

0 投票
1 回答
329 浏览

angular - 如果组件树设置了 OnPush 策略,那么更新祖先组件的真正方法是什么?

我有组件树,每个组件都有changeDetection: ChangeDetectionStrategy.OnPush,在这种情况下,祖先组件不会检测到它们正在使用的本地更改,例如 observables 或setTimeout(). 我通过this.ref.markForCheck()在应该更新组件的位置添加调用来做到这一点。但我想这可能不是解决问题的好方法。

那么什么是真正的方法呢?如果我使用第三方组件并且它没有this.ref.markForCheck()调用它可能不起作用,我是对的吗?

这是我的最低级别组件的代码:

0 投票
0 回答
1136 浏览

javascript - angular 2 - 尝试使用被破坏的视图

我正在构建一个 Angular 2 应用程序,它从服务器获取数据并使用 *ngFor 显示它。

当我单击 *ngFor 项目时,我将路线更改为不同的页面。到目前为止一切顺利.. 当我再次路由到 *ngFor 列表时出现问题(不要单击返回,只需通过菜单栏转到列表)。首先,列表的渲染速度比第一次慢,其次,当我再次单击 *ngfor 项目时,我收到以下错误消息:

在此处输入图像描述

我猜它以某种方式与我第一次获取数据时未发布的订阅有关,但我无法在任何地方找到它......我什至尝试将 item 组件与 changeDetectionRaf 分离,但我仍然收到此错误..

0 投票
0 回答
282 浏览

angular - 如何使用带有动作的多维列表来提高 Angular 2 的性能?

您好,我正在使用 Angular2 开发应用程序。我通过 api 收到一个必须在 html 表中显示的多维列表。

这是我从 api 收到的 json 的简化版本:

我试图在这样显示时隔离组件:

列表组件

EventComponent:(事件视图选择器)

SubEventComponent:(子事件视图选择器)

EventActionComponent:(事件动作选择器)

我所有的组件都使用changeDetection:ChangeDetectionStrategy.OnPush

我希望当我单击一个动作时,Angular 2 不会重新检查整个列表,而只会重新检查单击的按钮。

现在,Angular 对列表进行检查 + 对所有事件进行检查 + 对所有子事件进行检查 + 对所有操作进行检查 ...

我尝试使用 ChangeDetectorRef.detach 但它没有改变任何东西。

我的根列表事件是用 ImmutableJS 创建的。

有没有办法告诉 Angular 只检查一个子组件而不重新检查整个树?

先感谢您 ;)

0 投票
1 回答
5978 浏览

javascript - 可观察属性更改时的Angular2触发功能

我使用的workingData服务包含渗透到我的应用程序中的数据。它向 MockworkingData对象返回一个 observable。

该对象的一个​​属性workingData是一个名为 的日期字段selectedDate

该值可以通过单击“上个月”或“下个月”按钮来更新: 在此处输入图像描述

这会触发组件中的以下功能(或其incrementDate()对应功能)cal-nav

observable 更新了workingDate注入服务的所有组件中的视图,但我现在需要触发month组件中的函数(它是组件的兄弟cal-nav)。每次更新时如何触发组件中的功能,即使它是从不同的组件更新的?monthworkingData.selectedDate

selectedDate更新:我现在单独订阅该属性。

这会触发myFunc()oninit 但不会在值更新时触发。

0 投票
1 回答
715 浏览

angular - Angular 2 更改检测不适用于 .Subscribe() 回调中的基元?

我确信对此有一个合理的解释,但我真的很困惑为什么对象属性会在视图中更新,而原始类型的变量却没有。我正在使用来自 ngrx/store 的 observables,所以这可能是原因,但我觉得我在其他异步情况下看到过这种情况,所以我试图理解它。

例如,我有这个模板:

然后在我的组件的 TypeScript 类中,我有这样的东西:

当我查看屏幕时,表示 dataCounter 变量的文本未更新,但表示 data.counter 的文本已更新!即使是强制 zone.js 运行的额外块也无济于事。dataCounter 仍然显示原始文本(注意:实际发生的是 dataCounter 获取初始状态的值,但在以后触发订阅时它永远不会更新。data.counter 的文本总是更新)。有人可以解释一下吗?

这是我所描述的情况的一个 plunkr: https ://plnkr.co/edit/gEeAKK31Yo6kATjFQY08?p=templates

0 投票
0 回答
147 浏览

angular - 在 ChangeDetectionStrategy.OnPush 组件的分支内使用 ChangeDetectionStrategy.Default 组件

在带有组件的分支内部使用具有默认更改检测策略的组件是否可以接受,该组件使用 OnPush 更改检测策略定义?

让我们假设有 OnPush 组件,它具有一些组件层次结构,它们也是 OnPush。但是我们需要在这个层次结构的底部添加可重用的组件,例如显示当前时间。

为了使时间组件工作,我必须在其中使用 changeDetectionRef.markForCheck,它实际上强制 angular 检查该组件的所有祖先。

这样做是个好习惯吗?有什么可能的方法来避免它?

我知道我可以将我的更改时间逻辑移动到顶部组件,并传递当前时间值,但我不想这样做,因为这个组件是可重用的,我必须在几个地方复制这个逻辑,并且这也是从顶级组件到这个太大的方式。

0 投票
1 回答
1559 浏览

angular - 某些事件未触发更改检测

我有subscribes一个Observableservice. 当observable发出它的next值时,我的组件会发生一些变化。奇怪的是,组件是否会根据next值的生成方式更新视图。如果我正确理解这一点,一些事件已经被 angular 2 修补以触发更改检测,而有些事件还没有。MIDI 事件是那些没有的事件之一(这有点意思)。

如果服务查找单击事件以触发下一个值,则更改会反映在视图中。因此发生变化检测。

如果服务查找相同的键盘事件,则会发生更改检测。

但是,当服务使用 MIDI 事件时,不会发生更改检测。

这里有一些代码:

这是一个 plnkr :

https://plnkr.co/edit/SS6jwgQg4TVdOCC05cNV?p=preview

我不确定这是 Angular 2 底层工作的错误还是功能。无论如何,我想知道为什么会发生这种情况。通过自己调用更改检测可以轻松解决具体问题,因此我不需要解决方案。

0 投票
1 回答
2363 浏览

angular - Angular 2 变化检测因电子而崩溃

我有一个使用 Angular 2 的 Electron 应用程序。该应用程序工作正常,直到使用 ipcRenderer 从本地 JSON 文件加载数据。然后,作用于服务中数据的按钮不再触发更改检测过程来更新视图。我创建了一个简化的示例应用程序来演示这里的问题: https ://github.com/marshmellow1328/electron-angular-change-detection

我不知道为什么按钮停止触发本机更改检测。必须添加 ChangeDetectorRef 似乎没有必要。如果是,我想了解原因。