0

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

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

public imageGroups: IImageGroup[];
public status$: Observable<ModelStatusesModel>;


public ngOnChanges(changes: SimpleChanges): void {
  if (Boolean(this.treeData)) {
    this.imageGroups = this.treeDataService.convertImageGroups(this.treeData);
    this.status$ = this.updateStatus();
    this.status$.subscribe((status: ModelStatusesModel) => {
      this.treeDataService.updateStatus(this.imageGroups, status); // this function makes changes to this.imageGroups
      console.log('subscribe happened');
    });
  }
}

HTML：

...
<ul class="treeview-nodes-wrapper">
  <treeview-branch *ngFor="let group of (imageGroups)"
                                          [group]="group"></treeview-branch>
</ul>
...

该分支也有 ngOnChnages：

public ngOnChanges(): void {
  this._currentNodeDisabled = this.group.isDisabled;
  console.log(this.group); //returns isDisables as true
  console.log(this.group.isDisabled); //returns false
  console.log(this._currentNodeDisabled); //returns false
}

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

{ ... isDisabled: true ...},
false
false
subscribe happened

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

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

4

2 回答 2

1

这是在输入值时触发 ngOnChanges 的结果changes，并且对于通过引用传递的对象，对其属性的修改不会显式更改传递下来的内容。解决方案通常是执行克隆、...扩展运算符或重新分配给在父级 [输入] 中传递的属性。

您将附加输入更改为新值以触发 ngOnChanges 的解决方案也可以，这是一种解决方法，但那是 Web 开发。请记住，如果您将属性设置为 true 然后再次为 true 它不会触发，因此计数变量可能会更好地工作（这有点 hacky）。

于 2020-07-29T14:31:27.573 回答
1

通过 JSON.parse 进行克隆以比切换变量更简洁的方式解决了我的问题：

...
  this.status$.subscribe((status: ModelStatusesModel) => {
    this.treeDataService.updateStatus(this.imageGroups, status);
    triggerChange();
  });
...

private triggerChange() {
    this.imageGroups = JSON.parse(JSON.stringify(this.imageGroups));
}
于 2020-07-30T07:09:30.040 回答