Question

在由NgRX管理状态的项目中使用模态时，有什么好的解决方案吗？

问题出在以下方面：

用户单击按钮创建一个新项目。
模态窗口打开。
用户填写表格，然后单击“提交”。
通过发送HTTP请求来调度动作，启动效果并创建项目。
现在，我需要在成功时关闭模式。我怎么知道何时在模态组件内部或打开此模态的组件内部关闭它？

我现在看到的解决方案之一是从效果中返回多个动作，一个是将创建的商品添加到商店中，另一个是关闭模式。为此，我应该在“创建”操作中包含一些模式标识符，以识别在“创建$”效果完成后要关闭的模式，但这会使效果更加复杂。

我不敢相信没有现成的解决方案。

我将ngx-bootstrap用于模态。

更新：似乎要完成这项工作，我需要为应用程序中可用的每个模态存储（状态+归约器+效果+动作）打开/关闭状态。但是无论如何，没有现有的解决方案吗？

Answer 1

我喜欢使用一种效果来处理整个对话框流程，从打开对话框到保存实体再到随后关闭对话框。

@Effect()
openDialog = this.actions.pipe(
  ofType(LoginActionTypes.OpenLoginDialog),
  exhaustMap(_ => {
    let dialogRef = this.dialog.open(LoginDialog);
    return dialogRef.afterClosed();
  }),
  map((result: any) => {
    if (result === undefined) {
      return new CloseDialog();
    }
    return new LoginDialogSuccess(result);
  }),
);

有关更多信息，请参见Start using ngrx/effects for this。

Answer 2

您必须在组件的构造函数中注入NgbActiveModal并在其上调用方法close(REASON)。因此，您可以在组件中执行以下操作：

import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

export class ResetConfirmationComponent {

    constructor(
        public activeModal: NgbActiveModal
    ) { }
}

在该组件的模板中：

<button type="button" class="btn btn-primary btn-default"
    (click)="activeModal.close('Reason for being closed ...')">
    Submit
</button>
<button type="button" 
    (click)="activeModal.dismiss('closed')">
    <span aria-hidden="true">&times;</span>
</button>

我不知道您如何关闭“成功”对话框。当在open()上调用NgbModal时，close()的{{1}}方法返回一个Observable值（与在其上调用NgbActiveModal相对）。如果操作不成功，则应分派失败操作，然后以另一种效果重新打开对话框。

您可以找到一个完整的示例存储库，其中显示了动作和效果的使用：https://github.com/gflohr/ngbmodal-ngrx

其他说明和评论：http://www.guido-flohr.net/angular-bootstrap-modals-with-ngrx/

如何在使用NgRX管理状态的项目中关闭模态

2 个答案: