使用NGX和状态管理打开模式

Question

我想使用 NGXS 打开模式，它将设置数据表的列可见性。

这是我的代码：

状态.ts 文件：

@Action(OpenColumnModal)
openColumnModal(ctx: StateContext<FeedStateModel>) {
    const state = ctx.getState();
    const allCols = state.allColumns;
    return this.modalService.openColumnVisibilityModal(allCols).pipe(tap((result) => {
        ctx.setState({
            ...state,
            allColumns: result,
            userColumns: result.filter(col => col.visible)
        });
    })
}

模式.service.ts：

openColumnVisibilityModal(columns): Observable<any> {
    const dialogRef = this.dialog.open(ColumnVisibilityModal, {
        data: columns,
        autoFocus: false,
        hasBackdrop: true,
        disableClose: true
    });

    return dialogRef.afterClosed();
}

当我使用 NGXS 打开的模态时，关闭后不会发出状态事件。之后，我需要单击某处来调用 openColumnModal 函数内的回调函数。

我正在使用“角度材质”对话框。

有谁知道如何在关闭模态后自动调用回调函数？

提前致谢：）

Answer 1

PS - 建议在操作处理程序内订阅的其他答案不正确，因为 NGXS 不是那样工作的！

您当前的方法是正确的，问题是操作处理程序在 Angular 区域之外运行。只需将NgZone类注入到您的状态中并在 Angular 区域内执行代码即可：

constructor(private modalService: ModalService, private zone: NgZone) {}

@Action(OpenColumnModal)
openColumnModal(ctx: StateContext<FeedStateModel>) {
  const state = ctx.getState();
  const allCols = state.allColumns;
  return this.zone.run(() =>
    this.modalService.openColumnVisibilityModal(allCols).pipe(
      tap(result => {
        ctx.setState({
          ...state,
          allColumns: result,
          userColumns: result.filter(col => col.visible)
        });
      })
    )
  );
}

当您分派任何操作时 - NGXS 使用 调用父区域中此操作的适当处理程序runOutsideAngular，这是设计使然。

您还可以查看executionStrategy 选项，该选项允许提供自己的类或使用现有的（根本NoopNgxsExecutionStrategy不使用类）。NgZone