问题标签 [angular-changedetection]

这可能只是一个基本问题，但我试图牢牢地围绕 Angular 中的单向数据流。

如果更改检测总是从上到下发生，@Output 如何影响父组件？

我在这里假设有什么问题吗？有人请解释..

我的应用程序组件正在订阅商店选择。我设置ChangeDetectionStrategy为OnPush. 我一直在阅读它是如何工作的；需要更新对象引用以触发更改。但是，当您使用异步管道时，Angular 会期待新的可观察更改并为您执行 MarkForCheck。MarkForCheck那么，当订阅被触发并且我设置了channels$一个新的可观察频道数组时，为什么我的代码不呈现频道（除非我调用）。

我尝试了多种解决方案，包括使用 asubject和调用next，但除非我调用 MarkForCheck，否则它不起作用。

谁能告诉我如何避免打电话markForCheck？

在我正在构建的 Angular 5 应用程序中，我有一个侧边菜单和主内容菜单。

左侧的两个菜单项加载具有不同路线数据的相同组件。

默认情况下，Angular 使用相同的组件实例来渲染两者。因此，ngOnInit()只会被调用一次（一个实例）。

要呈现的组件包含一个子组件（更改检测设置为OnPush）。子组件以@Input()的形式接收数据

单击第一个菜单项时，数据将正确呈现。单击第二个菜单项时，旧数据仍在显示，一旦新数据从服务器到达，它就会被渲染。

提到的行为是正常的。父组件中的数据还没有变化，因此子组件@Input ( )没有改变，因此子组件的ngOnChange( )没有被触发。

当数据从服务器到达时，父组件将更新其数据，因此子组件@Input()将相应更新，因此将在子组件上触发ngOnChange()。因此，Angular 将更新 go 以进行 UI 渲染。

这里的目标是在导航到同一个组件时，预先重置数据，甚至在等待新数据到达之前。

这怎么可能？

谢谢

角 6.0.1。

这个问题在一个大型应用程序中表现出来，但我创建了一个简单的组件来尝试看看发生了什么。简单组件有一个简单的模板：

{{myProp}}

在 ngOnInit 中，我设置this.myProp = 'hello';并在屏幕上看到了hello这个词，正如我所期望的那样。到目前为止，一切都很好。

但是，如果我现在尝试更新myPropa的值setTimeout，它永远不会更新 UI：

UI 中显示的值仍然是hello。

如果我注入ChangeDetectorRef我的构造函数并cdr.detectChanges()在计时器内调用，则 UI 会更新。

这是预期的行为，还是我做错了什么？我不希望不得不为此打电话detectChanges。我没有更改ChangeDetectorStrategy组件的，所以它仍然是default.

请注意，在“真实”应用程序中，我不是myProp在计时器中更新，而是在Observable订阅中更新。UI 没有在那里更新，这就是导致我对此进行调查并在计时器处结束的原因，因为它是问题的最简单的可能再现。据我所知，以任何类型的异步方式更新属性值都不会显示 UI 中的更改。

更新

我认为我对 setTimeout 的引用使事情变得混乱。我用它作为调试的手段。我没有尝试重新处理这个问题，而是在此处发布了一个新问题（Angular interpolated value not updated on subscription），提供了更好的解释和让我感到悲伤的 ngRx 代码。

更新 #2 问题是由将其ChangeDetectionStrategy设置为OnPush. 请参阅我上面提到的问题。

• 角 6.0.1
• ngRx 6.0.1

我在视图中设置了一个插值：

{{firstName}}

当它绑定的字段的值发生变化时，它不会更新。但是，该值正在发生变化-如果我将其注销到订阅内的控制台，我会看到更新后的值。它只是不会在 UI 中更新。

以下是相关代码：

从我的组件订阅：

subscribeToCurrentPerson从组件的 ngOnInit 调用。在此之前，该firstName属性是未定义的。

选择selectors.getCurrentPerson器如下所示：

从选择器返回的currentPerson值是一个新创建的对象。这是在应用程序的第一次运行时发生的，因此在此之前tState是未定义的。

如果我注入ChangeDetectorRef我的构造函数并cdr.detectChanges()在订阅中调用，UI 会更新。但在我看来，我通常不需要ChangeDetectorRef像这样使用它，它应该“正常工作”。

我认为问题在于我的深层嵌套属性（cp.primaryName.value.parsedValue.givenNames）。我从一个非 ngRx 项目继承了这些实体，但我认为下一步是尝试扁平化该结构，看看这是否会使 ngRx 和 Angular 变化检测器更快乐。

还有什么我想念的吗？

更新

通过简单地更新订阅内我的组件上的本地属性，我已经将深层嵌套的属性排除在外。所以subscribeToCurrentPerson函数现在看起来像这样：

myProp是我为测试添加的组件上的现有属性。 newProp直到通过订阅内的括号表示法添加它才存在。结果如下：

• myProp未更新 - 它显示了我在声明时分配的值。但是，如果我在声明属性时未分配值，则订阅中分配的值会正确显示在 UI 中。
• newProp 在 UI 中正确显示

我现在完全困惑了。 似乎一旦属性具有值，它就永远不会在 UI 中更新，即使值本身确实发生了变化（我可以通过在更新值后登录到控制台来判断）。

我没有ChangeDetectionStrategy为组件明确设置 ，所以它是Default.

如果我打电话detectChanges，一切正常，但我认为这没有必要。

我研究了changeDetactionangular6 中机制的源代码，发现了一个有趣的设计，我和工作的人都不知道，这里的代码，有人知道它是什么或它是如何工作的吗？具体来说，第 60 行：

我在 Angular 中遇到了一条线
什么意思？

我认为这与数组的不可变概念有关。

假设我们有一个组件 -MyComponent带有OnPush更改检测策略，该策略注入ChangeDetectorRef 以手动触发detectChanges()（例如在订阅内或其他地方）。

我们也对这个组件进行了测试。所以当我们得到fixture = TestBed.createComponent(MyComponent)- 的实例时，我们也可以detectChanges()在我们的测试中触发执行数据绑定。

我的问题是 - 这两种方法在这两种情况下有什么区别？如果我component.changeDetecotrRef.detectChanges()在测试中触发而不是触发，我们可以获得相同的结果fixture.detectChanges()吗？

假设我们在 Angular 2 模板中有这些：

我想知道这些表达式是否会在ChangeDetectionStrategy.OnPush和ChangeDetectionStrategy.Default组件中的每个更改检测周期进行评估？

或者 Angular 确实知道每个表达式依赖于哪些属性，并且只有在这些属性发生变化时才重新评估它们？

在表达式中使用方法怎么样 - Angular 是否能够确定一个方法是否是纯的，以便它可以确定哪些属性应该导致表达式重新评估？

我订阅了一个 observable (getContentfulEntry) 来获取一些数据，但也从另一个 observable (stateService) 传递数据

将其作为参数。因此，当 this.lang 更新时会获取新数据。但是，除非我点击刷新，否则 this.subscription 不会更新视图中的数据。知道我做错了什么或如何解决这个问题吗？