如何从 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 来获取数据。
我的组件正在调用一个动作并使用@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 来获取数据。