当接口在NGXS状态下成功时,如何关闭MatDialogBox或任何div?

2022-04-13 00:00:00 javascript angular typescript ngxs ngrx

我已经开始学习使用NGXS进行状态管理。到目前为止,一切都很好,但对一些情况没有什么问题,比如-

  1. 如果Mat对话框(或任何div-我在这里有项目中的两个方案)处于打开状态,并且从其中调用了API,则仅当API返回成功时,我如何才能关闭该对话框?

  2. 假设用户注销,如何将状态重置为默认值?

下面第一种情况是我的状态代码,action&;Dispatcher:

abc.action.ts

export class AddExamCategory {
    static readonly type = '[ExamCategory] Add';
    constructor(public payload: ExamCategory) {}
}

abc.state.ts

export interface ExamCategoryStateModel {
    examCategoryList: ExamCategory[];
}

@State<ExamCategoryStateModel>({
    name: 'examCategory',
    defaults: {
        examCategoryList: []
    }
})

@Injectable()
export class ExamCategoryState {

    constructor(private _adminService: AdminService) {}

    @Action(AddExamCategory)
    addExamCategory({ getState, patchState }: StateContext<ExamCategoryStateModel>, { payload }: AddExamCategory) {
        return this._adminService.createExamCategory(payload).pipe(tap(response => {
            patchState({ examCategoryList: [] }); // Want to close the modal/div after this part. If API returns ERROR do not close.
        }));
    }
}

abc.Component.ts

this.store.dispatch(new AddAdminUser({ ...this.adminRegistrationForm.value, password: this.password.value }))
    .subscribe(response => {
      this.store.dispatch(new GetAdminUsers());
      this.dialogRef.close(true)
    });

目前是这样,但无论接口处于什么状态都会关闭。

对于第二种情况,在我为logout()编写逻辑的服务中,我编写了如下内容:this.store.reset({})。虽然它正在重置状态,但不是使用其中的默认值。我要在此单一注销方法上重置多个状态。

如何处理这些方案?


解决方案

要实现这一点,最简单的方法是在您发送操作后,您应该能够触发其他操作(如UsserAddedSuccessful&Quot;),并在关闭该模式后阅读它。

阅读此question了解更多详细信息。

相关文章