问题标签 [ngonchanges]

在研究 Angular 中 ngOnChanges 和 DoCheck 之间的区别时，我看到了一些我无法解释的东西，需要你的帮助。

基本上，我知道 ngOnChanges 无法识别数组或对象的变化，而 DoCheck 可以。我在这里创建了 stackblitz：https ://stackblitz.com/edit/angular-ivy-sbyzya?file=src/app/app.component.html

在 app.component.html 中

• 如果您注释第 2 行，那么只有 ngOnChanges 运行的组件，单击添加或编辑时数据没有排序。没错，因为 OnChange 无法检测到数组@Input 的变化。

• 如果您注释第 1 行，那么只有 DoCheck 运行的组件，单击添加或编辑时数据排序。没错，因为DoCheck可以检测到数组@Input的变化。

• 但是如果你让两个子组件都运行，当点击添加或编辑时，两个子组件中的数据都会被排序。这对我来说似乎很奇怪，因为我不明白为什么 DataTableOnchangeComponent 可以运行排序功能。我在 ngOnChanges 中进行了排序，单击添加或编辑时未触发 ngOnChanges，但不知何故数据仍然得到排序。

I am doing some tests using the SWAPI api (Star Wars); my goal is to call the api as the user clicks on a character list, so a film list where this character has participated can be displayed as well. Im trying to achieve this through the ngOnChanges hook, as im using a detail component with no routing. This is what it looks like in code:

Movie component TS:

Movie HTML

The Service:

In the service the main method should be getPeople. Anyway, first I call the people endpoint which retrives an object with nested arrays, so I have the map operator to have a results array only, and that's what I subscribe in the component. And within that subscription I have a second map so I can have only the films array in which each character participates in. So far so good. I can render all the characters and I have the films array ready. Then I pass all of this through the Input decorator and I populate the arrays in the child component:

HTML:

So, as I click on a diferent character, I want to display the movies he has been into. As it is, I get only the last movie the character was in and the logs show me all the movies but as strings only, and if I iterate over them I get the chars...So there is something going on and I can't figure out what...Can someone give me a hint?

我有一个主组件，它调用一个子组件，它是一个切换面板，当我激活切换时，它会发出切换的值（真或假）

切换面板.component.ts

当我以这种方式使用此组件时：

main.component.html

它工作得很好， isToggle 的值发生了变化。

但是当我这样使用它时：

main.component.html

在主要组件中使用此功能：

main.component.js

当我切换切换时，永远不会调用 onToggleChange 函数，我不明白为什么。

问题是当“toggleValue”的值发生变化时，我必须调用函数发出。

我还尝试使用 ngOnChanges 来检测“toggleValue”的变化，但即使在切换面板组件中调用了发出函数，ngOnChanges 也没有检测到变化。

我该如何解决这个问题？

I'm taking @Input() from parent component, and using ngOnChanges to catch the change. But it only fires once. It changes the current value, but the previous value is always undefined. Here's what I'm doing:

Here, console.log(changes) occurs only once. Although the value inside it changes every time @Input() changes. My myInput.currentValue is an array and I want to do something every time a new object is pushed on to the array via @Input() from parent. It doesn't go inside the if condition and I can't find length.

我想知道是否有人可以请教。

我有数据通过 Socket.io 服务进入组件。试图决定哪种方法最合乎逻辑？

我可以：

A. 让父组件调用观察者并通过@Input 将数据推送到变量，然后通过 OnChange 更新它。

B. 调用组件中的服务并从订阅者那里更新变量。

C.调用组件中的服务并更新ngDoCheck中的变量。

只是想知道哪个最合乎逻辑？还是不管每条路线都看到数据更新实际上是否重要？

我有一个使用 SimpleChanges 的 ngOnChanges

但是在html中我想像这样使用那个函数

无论如何我可以将参数传递给该方法吗？谢谢你。

在通过 subscribe 方法在父级中操作数据后，我有ngOnChanges一个子组件没有被触发的问题。

基本上我的主要组件如下所示：

HTML：

该分支也有 ngOnChnages：

当我运行我的应用程序时，这是控制台中的结果：

我也试图在我的订阅中包围呼叫，ngZone.run但没有任何成功。你知道如何告诉ngOnChanges孩子触发的角度吗？

编辑：对我有用的是在父组件 ( public change = false;) 中创建一个属性，然后在我的 subscribe 方法中切换该属性并将其作为我的子元素的输入。这被认为是一种改变。尽管这解决了我的问题，但它看起来更像是一种非常老套的代码编写方式。

我预计 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()？

我有一个父组件和一个可重用的子组件。我想在不使用任何提交按钮的情况下触发子组件中的值并在父组件中的输入更改时显示结果。每当输入值发生任何变化时，我都想调用具有更新值的子组件或可重用组件的 mySubmit() 函数，因为它负责渲染图形。

在父组件（app.component.ts）中：-

在父 component.html 文件 (appcomponent.html) 中：-

*

在子 component.ts (Reusableappcomponent.ts) 中：-

在子 component.html (ReusableComponent.html) 中：

我很困惑为什么当我更改输入中的值时渲染没有改变。

我有这个组件。我想在第一次@Input更改时做一些事情。问题是changes.firstChange总是错误的（在初始化和更改之后）。

为了使用它，我正在做：

我也试过：

<test [myValue]="myValue | async "></test>// 使用时of

正如您在图像中看到的那样changes.firstChange，无论我稍后传递一个字符串还是一个新值，它总是错误的。

这些是输出：

这是使用 rxjs 值时的输出：(value changed but never changed firstChange to true