Angular 如何从MatDialog传递数据=>；Rxjs效应=>；组件？

我的组件正在调用一个操作并使用@Effect打开对话框。 该对话框将数据发送回@Effect。我可以在@Effects中使用.afterClosed（）查看数据，但我不知道如何使用.afterClosed（）将数据发送到组件

以下是组件调用对话框的方式：

this.store.dispatch(new fromWorkspace.ShowDialog());

以下是“效果”中的对话框：

  @Effect({ dispatch: false })
   showDialog$ = this.actions$.pipe(
    ofType(WorkspaceActionTypes.ShowDialog),
    map(action => {
      this.dialogRef = this.addPersonDialog.open(PersonSelectorComponent, {
        disableClose: false,
        hasBackdrop: true,
        restoreFocus: true,
        data: { }
      });
      // I can see the data here;
      this.dialogRef.afterClosed().subscribe(result => console.log(result));
    })
  );

以下是对话框如何将数据发送回：

constructor(@Inject(MAT_DIALOG_DATA) public data: any,
              public dialogRef: MatDialogRef<PersonSelectorComponent>) { }


 addPerson(event: MatAutocompleteSelectedEvent) {
    if (event.option.selected) {
      const person = event.option.value;
      if (person) {
      this.dialogRef.close(person);
      // data is correct here;
      console.log(person);
      }
    }

构造函数（@Inject（MAT_DIALOG_DATA）公共数据：任意，
公共dialogRef:MatDialogRef）{}
addPerson（事件：MatAutocompleteSelectedEvent）{
如果（已选择事件选项）{
const person=event.option.value；
如果（人）{
此对话框参考关闭（个人）；
//这里的数据是正确的；
控制台日志（个人）；
}
}

回到组件，这里是我试图使用的方法。afterClose（）

public dialogRef:MatDialogRef
//这行不通
this.assignedialogref.afterClosed（）.subscribe（result=>console.log（result））；

通常，从效果上看，您将使用生成的数据发送一个操作，该操作将通过您的reducer，然后在您的数据存储中结束。从那里，您的组件将订阅数据存储（通过选择器），并以这种方式获得更新的数据

---

如果您使用效果直接获取数据并将其返回到组件，而不将其放入存储区，那么我根本不会使用效果。我只会直接调用对话框并获取结果，然后对其执行我想要的操作。

通常，从效果中，您会发送一个操作，其中包含经过您处理的结果数据从那里，组件将被订阅到数据存储（通过选择器），并以这种方式获得更新的数据

---

如果您使用效果直接获取数据并将其返回到组件，而不将其放入存储区，那么我根本不会使用效果。我只需直接调用对话框并获取结果，然后对其执行我想要的操作。

因此，继续使用action/reducer方法，我做了如下操作：

• 创建了一个新操作“addPerson/addPersonSuccess”（以避免订阅从对话框返回的数据）

• 然后在减速器中进行处理：

• 减速器中还包括一个选择器：

• 然后回到组件中，在构造函数中调用它：

• 现在我可以通过订阅“this.person$”来获取数据

---

因此，继续采用动作/减速器方法，我做了如下工作：

• 创建了一个新操作“addPerson/addPersonSuccess”（以避免订阅从对话框返回的数据）

• 然后在减速器中进行处理：

• 减速器中还包括一个选择器：

• 然后回到组件中，在构造函数中调用它：

• 现在我可以通过订阅“this.person$”来获取数据

---

尝试在stackblitz创建一个演示，这样可以更快地解决问题。尝试在stackblitz创建一个演示，这样可以更快地解决问题。感谢您的回复。您的意思是将我当前的代码片段移动到组件中，如下所示？``showDialog$=this.actions$.pipe（ofType（WorkspaceActionTypes.showDialog），map（action=>{this.dialogRef=this.addPersonDialog.open（PersonSelectorComponent，{disableClose:false，hasBackground:true，restoreFocus:true，data:{}}}）；//我可以在这里看到数据；this.dialogRef.afterClosed（）.subscribe（result=>console.log（result））；}）“``您不需要任何操作的东西，因为这是针对ngrx的，所以它会像：

this.dialogRef=this.addPersonDialog.open（PersonSelectorComponent，{disableClose:false，hasBackground:true，restoreFocus:true，data:{}}）；//我可以在这里看到数据；this.dialogRef.afterClosed（）.subscribe（result=>console.log（result））；

感谢您的建议。我决定采用分派操作/减速机的方法。它工作起来很有魅力。：）感谢您的回复。您的意思是将我当前有效的代码片段移动到组件中，如下所示？``showDialog$=this.actions$.pipe（ofType）（WorkspaceActionTypes.ShowDialog），map（action=>{this.dialogRef=this.addPersonDialog.open（PersonSelectorComponent，{disableClose:false，hasBackground:true，restoreFocus:true，data:{}}）；//我可以在这里看到数据；this.dialogRef.afterClosed（）.subscribe（result=>console.log（result））；}）``您不需要任何操作的东西，因为这是针对ngrx的，所以它会是这样的：

this.dialogRef=this.addPersonDialog.open（PersonSelectorComponent，{disableClose:false，HasBackground:true，restoreFocus:true，data:{}）；//我可以在这里看到数据；this.dialogRef.afterClosed（）.subscribe（result=>console.log（result））；

谢谢你的建议。我决定采用分派操作/减速机方法。它工作起来很有魅力。：）

public dialogRef: MatDialogRef<PersonSelectorComponent>


//this does not work
this.assigneeDialogRef.afterClosed().subscribe(result => console.log(result));

  addPerson$ = this.actions$.pipe(
    ofType(WorkspaceActionTypes.AddPerson),
    map(action => {
      return new AddPersonSuccess(action.payload);
    }),
    catchError(error => this.dispatchErrorHandleActions(new addPersonFailure(error),
            `Couldn't add person. Please try again later.`))
  );

 case WorkspaceActionTypes.AddPersonSuccess:

      return update(state, {
        person: {
          data: { $set: action.payload }
        }
      });

export const addPerson = createSelector(getWorkspaceState, (state: WorkspaceState) => state.person);

 this.person$ = this.store.select(fromWorkspace.addPerson);