如何从 MatDialog => Rxjs Effect => Component 传递数据?

How do I pass data from MatDialog => Rxjs Effect => Component?

我的组件正在调用一个动作并使用@Effect 打开对话框。 Dialog 将数据发送回@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);
      }
    }

回到组件这里是我尝试使用 .afterClose() 的方式:

public dialogRef: MatDialogRef<PersonSelectorComponent>


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

一般情况下,您会使用结果数据发送一个动作,这些数据将通过您的减速器,然后最终进入您的数据存储。从那里您的组件将被订阅到数据存储(通过选择器)并以这种方式获取更新的数据。

如果您使用效果直接获取数据并将其 return 到您的组件而不将其放入商店,那么我根本不会使用效果。我只是直接调用对话框并获得结果并用它做我想做的事。

所以,继续使用 action/reducer 方法,我做了如下操作:

  • 创建了一个新操作"addPerson/addPersonSuccess"(以避免订阅从对话框返回的数据。
  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.`))
  );
  • 然后在reducer中处理:
 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);
  • 现在我可以通过订阅 'this.person$' observable 来获取数据。