将数据从childA组件一直传递到其父组件，然后再传递到childB组件

Question

我有一个父组件，有两个孩子， 1.app-search-list和 2.app-vertical-menu

我正在将数据从app-search-list（childA）组件传递到其父组件，然后从父传递到app-vertical-menu组件（childB），如图所示

您可以在stackblitz here

上找到指向代码的链接。

以这种方式传递数据可以正常工作，但是如果我们去其他路线 然后返回并从选择列表组件中单击列表，数据未按预期传递。 我拍了一段视频来解释这个问题。这是link

Answer 1

问题在于，当已经选择了一个组时，只有在父级（vertical-menu.component）中对该值的引用发生更改时，它才会更新为子级组件（app.component）。因此，如果单击已选择的组，则不会发生任何事情，因为它将引用同一对象。这是由于角度变化检测。

一种解决方案是简单地创建从search-list.component发出的对象的新实例。

search-list.component.ts

public onClickList(list:any) {
  const selected = Object.assign({}, list);
  this.selectedList.emit(selected);
}

下面的链接是我认为您要完成的事情的分叉式闪电战。

  

https://stackblitz.com/edit/github-n9pmlg-6fds9q

     

https://medium.com/@bencabanes/angular-change-detection-strategy-an-introduction-819aaa7204e7

Answer 2

您是否尝试过使用设置器将值传递给childB？像这样的东西：

data: any

@Input()
  set selectedData(selectedData: any) {
    if (!!selectedData) {
      this.data = selectedData;
    }
  }