问题标签 [ngonchanges]

我有一个案例，我有一个父组件和 2 个子组件（基于 ng-select 的选择组件）这个想法是，当我在第一个 ng-select 中选择和项目时，应该在第二个中禁用相同的。反之亦然。

在父我使用@ViewChildren 来查询组件和设置禁用输入属性

在孩子们中，当我在 ng-select 中选择和项目时，我会在父母中发出我需要的信息

在这种方法中，我然后找到正确的子组件并设置禁用的输入属性

在子组件中，我有 ngOnChanges 方法来检查更改，但 disabledConnection 属性没有得到更新

它仅在我进行页面加载时有效

父视图：

孩子：

我在这里想念什么？

-贾尼

点击“Edit”后，“editStatus”函数被调用，“order.status”的值发生变化。但 html 视图保持不变 - 显示订单的旧状态。它仅在刷新页面后更改。更改后如何使状态显示更新的变量？

html:

ts文件：

订购服务：

我有一个父组件通过输入向子组件发送数据。NgOnChanges 不会像我预期的那样工作。我知道它不适用于对象/数组，因为它们是通过引用发送的，因此 Angular 无法检测到更改。

因此，我尝试了使用 Object.assign() 将其分配给新对象以创建新引用的解决方法，但它不起作用。

家长 TS：

儿童 TS：

oldWeeklyScheduleSelected 和 weekScheduleSelected 效果很好，因为它们是数字。

sendScheduleToChild 在第一次点击时不会。但它会在之后的第二个，但我的数据会在那个时候搞砸。

console.log(changes) 显示已更改的变量，但在 sendScheduleToChild 的情况下，先前值和当前值都相同，而其他两个则不同。

我不明白为什么它一开始没有检测到更改，但由于发送的数据属于同一类型，所以单击 2 次后会检测到更改。

任何帮助表示赞赏。

PS：

我试图通过更改值来修改对象的引用：

但它的行为仍然出乎意料。

我正在使用 Angular 开发电子商务应用程序。我正在使用 OnChange 生命周期挂钩来检测购物车组件中的更改并计算总价。但是，未检测到更改。

打字稿代码：

模板部分：

我有一个从另一个组件更新的数组（更新正在发生并且字符串被添加到我用测试按钮检查过的数组中）但 ngOnChanges 不会检测到任何更改。我的代码有什么问题？

我应用的更改是array.push()。

我的父组件有一个非二叉树节点（树的根）作为子节点。每个节点可以有 0 个或多个节点类型的子节点，并且子节点可以折叠或展开。此外，在我的父组件中，有一个按钮可让您折叠树中所有节点的所有子节点或展开所有子节点。

我有一个枚举，它标记整个树是否折叠（通过按钮）、整个树是否展开（通过按钮），或者树状态是否是手动控制的（与此问题无关）。

枚举看起来像这样：

父组件.ts：

父组件.html：

树-item.component.ts：

tree-item.component.html（基本 DFS 树解析）：

我根本无法理解为什么，当我点击Expand All，从而将 treeStatus 更改为 Expanded 时，ngOnChanged 正常工作并按预期传播到三个节点中的每个节点，但是当现在点击Collapse All时，这会触发相同的 ngOnChanges 回调方法，唯一检测到更改的节点似乎是根。

以下是日志的显示方式： 最初，当打开组件时，root id 的状态为 0（已折叠），而不是未定义：

2013777645：未定义 => 0

点击Expand All后，root Id 的值从 0(Collapsed) 更改为 1(Expanded)，其余节点从 undefined 更改为 1(Expanded)

2013777645：0 => 1

2118369458：未定义 => 1

368241412：未定义 => 1

1860836078：未定义 => 1

1979885541：未定义 => 1

1316570423：未定义 => 1

360484732：未定义 => 1

506271756：未定义 => 1

现在，在点击Collapse All后，日志中只显示根，将值从 1（展开）更改为 0（折叠）。

2013777645：1 => 0

最后，如果我们现在再次点击Expand All ，则会出现与以前完全相同的日志，即使其他节点不应该具有未定义的 treeStatus 值，因为它之前已被分配了一个值。

2013777645：0 => 1

2118369458：未定义 => 1

368241412：未定义 => 1

1860836078：未定义 => 1

1979885541：未定义 => 1

1316570423：未定义 => 1

360484732：未定义 => 1

506271756：未定义 => 1

你能帮我理解我错过了什么吗？我真的希望你能从这个解释中理解这个问题。先感谢您！

这是我的场景：

我有一个配置了 OnPush 策略的组件，它逐页显示 PDF 文档，并允许用户滚动页面并导航到某个页面。它还公开了一个输入属性scrollToPage，该属性允许父级导航到某个页面。

一切都按预期工作，除了一种情况：

1. 父母将scrollToPage输入设置为，比如说，数字 2
2. ngOnChanges 触发并滚动到第 2 页
3. 用户导航到 PdfDocumentComponent 内的另一个页面（从视图调用 goToPage 函数）
4. 父母再次将scrollToPage输入设置为数字 2

在这种情况下，ngOnChanges不会触发 并且goToPage不会调用函数，因为之前的值scrollToPage是相同的，数字 2。

要解决这个问题，我只能看到 3 个选项，但它们似乎都不合适，而且或多或少是 hack：

1. 将输入类型更改为对象并始终发送新引用。（我不喜欢这样，因为当我真的希望它发送一个简单的数字时发送一个对象没有意义）
2. 在父组件中使用@ViewChild以获取对子组件的引用并从那里调用该goToPage函数。（我不喜欢这样，因为我想尽可能清楚地保持我的组件与外部的合同 - 仅使用 @input 和 @output 属性。否则，我也必须记录这些公共函数。）
3. 将 OnPush 策略更改为 Default。（这实际上不是我的选择）

你们知道这个问题的任何其他解决方案吗？有没有更优雅的解决方法？

我试图理解回调 ngOnChanges() 所以我创建了下面发布的示例。但是在编译时，尽管 Post 接口分别具有其属性 title 和 content 的值，但是，我没有收到来自 ngOnChanges 的任何日志

请让我知道如何正确使用

app.component.ts：

更新 05.04.2021

按照建议，我添加了 ngOnChanges 来观察使用 Input 装饰器注释的属性的变化，如下所示：

现在，当我编译代码时，我添加了一些值，我从 ngOnChanges 收到以下日志：

但问题是当我不断添加更多值时，我没有收到来自 ngOnChanges 的任何日志，请告诉我为什么尽管我不断添加更多值导致更改用 @Input 装饰的对象的内容？？！

post-list.component.ts：

我想知道 ngOnChanges 回调是如何工作的。所以我添加了它来观察使用 Input 装饰器注释的属性的变化，如下所示：

现在，当我编译代码时，我添加了一些值，这些值会导致使用@Input 注释的属性发生更改，但这不会导致调用和执行 ngOnChanges 回调。请参阅下面发布的屏幕截图中显示的日志。

我想查看浏览器中显示的 ngOnChanges 中的日志。请让我知道是什么阻止了正确调用和调用 ngOnChanges

app.component.ts：

app.component.html：

post-list.component.ts：

post-list.component.html：

错误截图：

角 9

我正在尝试使用 ngOnchanges 来触发对我的表单的加载。表单的数据来自 shell 组件的 @input。

我遇到的问题是 ngOnChanges 在 ngOnit 之前触发，并且尚未构建表单以填充数据。

玩弄它我已经使用 setTimeout 进行了临时修复，但它并不理想

即使延迟为 0，超时也足以让表单赶上。如果我不延迟数据在表单构建之前加载并触发没有数据的错误。

这似乎很基本。我错过了什么？

谢谢。