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

Question

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

这是我的代码:

state.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)
        });
    })
}

模态服务.ts:

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

    return dialogRef.afterClosed();
}

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

我正在使用 Angular Material 对话框。

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

提前致谢:)

Answer 1

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

您当前的方法是正确的，问题是操作处理程序在 Angular 的区域之外运行。只需将 NgZone 类注入(inject)您的状态并在 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 option允许提供自己的类或使用现有的 NoopNgxsExecutionStrategy，根本不使用 NgZone 类。