Question

我有一个ParentComponent，其中一个ChildComponent包含另一个ChildComponent（边栏中的ResultList）

在ParentComponent中，从侧边栏打开一个具有类似ResultList的对话框-从技术上讲，它是相同的组件-但它包含更多项。我尝试在对话框中选择一些值然后我想将它们再次推到侧边栏中的第一个ResultList。

现在，我正在尝试将resultList变量传递给每个组件，以在边栏中更新我的列表，但这似乎有些复杂。

如果您（希望）理解我的问题-您还有其他想法如何从模式对话框中更新侧边栏组件吗？

如果您还有其他问题，请询问：）

Answer 1

我建议使用Service，将BehaviorSubject暴露在asObservable上，并subscribe在要获取更新的{{1 }}

因此您将获得服务：

resultList

在对话框组件中，您将使用import { BehaviorSubject, Observable } from 'rxjs'; ... export class ResultListService { private resultList: BehaviorSubject<any[]> = new BehaviorSubject<any[]>(null); public resultList$: Observable<any[]> = this.resultList.asObservable(); updateResultList(updatedList) { this.resultList.next(updatedList); } }方法并将更新后的结果列表传递给它：

updateResultList

现在在您想要更新的constructor(..., private resultListService: ResultListService) {} ... this.resultListService.updateResultList(updatedResultList);的任何组件中，只需将resultList从subscribe到resultList$：

ResultListService

Answer 2

除了通过多个组件或使用服务链接@Input和@Output参数之外，还有其他选择（如果您是Angular的新手，这可能是最好的解决方案），其中之一是利用共享状态。

使用状态管理框架，例如ngrx，ngxs或akita，您可以在组件之间共享状态和对该状态的更改-在这种情况下，是数组及其内容的更改。

一旦设置，商店将设法将子组件中选择的项目添加到父组件中引用的数组中。这两个组件甚至都不必相互关联。

这两个ngrx和ngxs的教程都涵盖了与您相似的用例。您正在使用模式对话框和两个列表这一事实并不会改变商店的使用方式。

这可能超出您要完成的目标的范围，但您需要牢记。

Answer 3

如果要在组件之间共享值，则应执行Service并将其注入需要的每个组件中。

@Injectable({
 providedIn: 'root',
})
export class ResultListService {
  public myResultList: string;
}

（使用providedIn: 'root'，它将注入到您应用的根目录，因此只能实例化一次，并且在组件之间共享同一实例）

然后将其传递给组件的构造函数参数：

export class SidebarComponent   {

  constructor(public resultListService: ResultListService){}

  // this.resultListService.myResultList
}

Angular 5-从另一个组件更改变量

3 个答案: