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

【问题标题】：Passing data all the way from childA component to its parent component and then to childB component将数据从 childA 组件一路传递到其父组件，然后再传递到 childB 组件
【发布时间】：2020-01-05 11:17:58
【问题描述】：

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

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

你可以在 stackblitz here找到代码链接

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

【问题讨论】：

你应该考虑给我们ngrx statemanagement
一年前我们已经开始构建这个应用程序了。
这不会改变将 redux 模式用于复杂应用程序的一般最佳实践。现在的问题是由这个设计决定引起的。
那么你需要一个由每个组件注入的服务
是的，但不想用服务来做。

标签： angular

【解决方案1】：

您是否尝试过使用 setter 将值传递给您的 childB？像这样：

data: any

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

【讨论】：

【解决方案2】：

问题在于，当一个组已被选中时，它只会在父组件 (app.component) 中对值的引用发生更改时更新到子组件 (vertical-menu.component)。因此，如果您单击已选择的组，则不会发生任何事情，因为它将引用相同的对象。这是由于角度变化检测造成的。

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

搜索列表.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

【讨论】：

谢谢它的工作，但我也想删除所选列表的活动类