前端之家

  1. 首页
  2. 问答

如何从MatDialog => Rxjs Effect =>组件传递数据？

• 问答

我的组件正在调用操作，并使用@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);
      }
    }

回到组件，这就是我尝试使用.afterClose（）的方式：

public dialogRef: MatDialogRef<PersonSelectorComponent>


//this does not work
this.assigneeDialogRef.afterClosed().subscribe(result => console.log(result));
as25863066 回答：如何从MatDialog => Rxjs Effect =>组件传递数据？

通常，从效果中，您将使用结果数据调度操作，该结果数据将通过化简器，然后最终存储在数据存储中。从那里，您的组件将被订阅到数据存储（通过选择器），并将以这种方式获取更新的数据。

如果您使用效果直接获取数据并将其返回到组件中而不将其放入存储中，那么我根本不会使用效果。我只需要直接调用该对话框即可得到结果并使用它来做我想做的事情。

,

所以，继续采取行动/减少者的方法，如下：

  • 创建了一个新动作“ addPerson / addPersonSuccess”（以避免订阅从Dialog返回的数据。
  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);
  • 现在我可以通过订阅可观察到的“ this.person $”来获取数据。
angulardialogdialogresultrxjsstore
本文链接：https://www.f2er.com/3071928.html

大家都在问