代码之家 › 专栏 › 技术社区 › Nadine Fisch

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

angular

0

Nadine Fisch · 技术社区 · 7 年前

ParentComponent ChildComponent 包含另一个 ( ResultList 在侧边栏中)

在 结果列表 从侧边栏-从技术上讲,它是同一个组件-但它有更多的项目又在侧边栏里。

resultList 变量来更新侧边栏中的列表,但它似乎有点复杂。

如果你(希望)理解我的问题-你有什么其他的想法,我如何从模式对话框更新我的侧边栏组件?

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

3 回复 | 直到 7 年前

1

8

SiddAjmera 7 年前

我建议使用 Service 用一个 BehaviorSubject 暴露的 asObservable subscribe 在您想要更新的所有组件中都可以找到它 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 方法并将updateResultList传递给它:

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

结果列表 ,只是 订阅 到 resultList$ ResultListService :

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

2

Gordon Westerman 7 年前

除了通过多个组件链接@Input和@Output参数或使用服务(如果您不熟悉Angular,这可能是最好的解决方案)之外,还有其他选择,其中之一就是使用共享状态。

ngrx , ngxs 或 akita 允许您在组件之间共享状态和对该状态的更改—在本例中是数组及其内容的更改。

这两个教程 ngrx 和 ngxs 两者都涵盖了与您类似的用例。事实上,您使用的是一个模态对话框和两个列表,这并不会改变存储的使用方式。

3

1

Maarti 7 年前

如果要在组件之间共享值,应该执行 Service 它将被注入到你需要的每个组件中。

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

(与 providedIn: 'root' ,它将被注入到应用程序的根目录中,因此它将只实例化一次,并且同一实例将在组件之间共享)

export class SidebarComponent   {

  constructor(public resultListService: ResultListService){}

  // this.resultListService.myResultList
}