Question

我的父级组件有一个子级组件：Child0和Display。

Child 0具有一个按钮，可打开一个模式，用户可以在其中从列表中选择项目。显示组件只有一个标签和一些文本。

UI流程：

用户单击按钮
模式会打开并在网格中显示一些项目
用户可以通过在每一行中选中一个复选框来选择数据
用户关闭模式
所选数据显示在显示组件中。

所选数据存储在服务中。

我在显示组件中显示数据时遇到问题。当我查看ngOnInit中的选定数据时，该数据为空，因为用户尚未选择任何内容。所选数据更改时如何更新此组件？

主要应用组件

<div class="row">     
  <child0-app (onSelectedData)="getSelectedData($event)"  [dataForm]="dataForm"></child0-app>     
</div>  
<div class="row">
   <app-display></app-display>
</div>

我的服务

  public getSelectedData() {
    return this.selectedData;
  }

  public setSelectedData(selectedData: any[]) {
    this.selectedData = selectedData;
  }

GridComponent

 getCheckedItemList() {
    this.checkedList = [];

    for (let i = 0; i < this.data.length; i++) {
       if (this.data[i].isSelected) {
        this.checkedList.push(this.data[i].Name);
      }
    }
   this.appService.setSelectedData(this.checkedList);
  }

DisplayComponent

 constructor(private service: AppService) {
    this.selectedData = this.service.getSelectedData();  
  }

StackBlitz

---更新的答案---

感谢@Vlad帮助我解决此问题。

其他访问此帖子的人。我使用下面的代码来订阅和取消订阅

private subscription: Subscription = new Subscription();

ngOnInit () { 
this.subscription.add(
 this.appService.selectedDataObservable.subscribe(selectedData => {
   console.log(selectedData);   
  }));
}  

 ngOnDestroy() {
   this.subscription.unsubscribe();
  }

Answer 1

Updated StackBlitz

我已经更新了示例，以使用Angular documentation中的“家长和孩子通过服务进行交流”模式。

简而言之，您需要某种方式来“侦听”服务中对数据的更改。 Angular包括用于这种情况的RxJS库。因此，您需要创建一个Subject来发出新值，并创建一个Observable来监听更改。

大致而言，您将获得以下服务：

@Injectable({
    providedIn: "root"
})
export class DataService {
    private dataSubject = new BehaviorSubject<any>(null);

    public dataObservable = dataSubject.asObservable();

    public setData(data: any) {
        this.dataSubject.next(data);
    }
}

其他组件可以通过以下方式“发送”数据：

this.dataService.setData(newData);

并通过以下方式获取/收听新数据：

this.dataService.dataObservable.subscribe(newData => {
    // Do Stuff
});

因为它使用了BehaviorSubject来存储“当前值”，所以任何新订阅者都将立即使用现有值运行并监听将来的更改。

注意事项：

确保取消订阅可观察的项目！否则，您引入了内存泄漏。我偏爱this article中的takeUntil方法。
“监听”更改是异步操作，因此您可能需要手动告诉组件更新视图。我认为this article对变更检测非常有帮助。

将数据更改从模式传递回子组件

1 个答案: