时间戳

首页 > 解决方案 > Angular 5 - 从另一个组件更改变量

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

问题描述

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

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

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

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

如果您还有其他问题 - 请询问:)

标签： angular

解决方案

我建议在您想要获得更新的所有组件中使用Service带有BehaviorSubject暴露asObservable和ing 的 asubscriberesultList

所以你会有一个服务：

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方法并将updatedResultList 传递给它：

constructor(..., private resultListService: ResultListService) {}
...
this.resultListService.updateResultList(updatedResultList);

现在在您想要更新的任何组件中，resultList只需subscribe从：resultList$ResultListService

constructor(..., private resultListService: ResultListService) {}
...
this.resultListService.resultList$
  .subscribe(resultList => console.log('This is the updated resultList: ', resultList));

推荐阅读