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

Question

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

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

用户界面流程：

1. 用户点击按钮
2. 模式打开并显示网格中的一些项目
3. 用户可以通过在每行中标记复选框来选择数据
4. 用户关闭模态框
5. 所选数据显示在“显示”组件中。

所选数据存储在服务中。

我在显示组件中显示数据时遇到问题。当我查看其中选定的数据时，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;
  }

网格组件

 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);
  }  

显示组件

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

堆栈闪电战

---更新答案---

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

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

private subscription: Subscription = new Subscription();

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

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

Answer 1

更新了 StackBlitz

我已更新示例以使用Angular 文档中的“父级和子级通过服务进行通信”模式。

简而言之，您需要某种方式来“侦听”服务中数据的更改。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存储“当前值”的 ，所以任何新订阅者将立即使用现有值运行并侦听未来的更改。

注意事项：

1. 确保取消订阅可观察的内容！否则，您就引入了内存泄漏。我偏爱这篇文章takeUntil中的方法。
2. “监听”更改是一个异步操作，因此您可能需要手动告诉组件更新视图。我认为这篇关于变更检测的文章非常有帮助。