在执行下一个函数之前，如何等待来自 Angular bootstrap 模态 window 的响应？

Question

我正在尝试创建一个证明 window 供用户在将数据提交到数据库之前验证他们的输入。

bootstrap 模态 window 有效，但如果我将 func x() 放在按钮的 (click)= 行中，则 x() 在显示模态时执行.

另一个困难是我正在尝试对三个潜在的数据库更新请求（删除、post 或放置）使用模态 window，因此 x() 需要动态，具体取决于哪个按钮打开了模式 window.

bootstrap 模态 window 有效，但如果我将 func x() 放在按钮的 (click)= 行中，则 x() 在显示模态时执行.

另一个困难是我正在尝试对三个潜在的数据库更新请求（删除、post 或放置）使用模态 window，因此 x() 需要动态，具体取决于哪个按钮打开了模式 window.

HTML

<span *ngIf="!isCurrent">
                                    <button class="entry" id="add" (click)="openProofWindow(proof, 'add');">Add</button>&nbsp;&nbsp;
                                </span>
                                <span *ngIf="isCurrent">
                                    <button class="entry" id="update" (click)="openProofWindow(proof, 'update');">Update</button>&nbsp;&nbsp; <!--updateRequest();-->
                                    <button class="entry" id="delete" (click)="openProofWindow(proof, 'delete');">Delete</button>&nbsp;&nbsp;
                                </span>

ts代码

 openProofWindow(content, target): void {
 this.modalService.open(content, target);

我试过：

(click)="openProofWindow(proof, 'add');addRecord();"

但这会在模式关闭之前执行。

这是模态 window (HTML)

<div class="modal-header container">
        <div class="row">
            <h4 class="modal-title col-7">Proof Copy</h4>
            <button type="button" class="btn col-2 btn-modal" aria-label="no" (click)="modal.dismiss('cancel click')">
                    <span aria-hidden="true">No</span>
                </button>
            <button type="button" class="btn col-2 btn-modal btn-success" aria-label="ok" ngbAutofocus (click)="modal.close('Ok click');">
                <span aria-hidden="true">Ok</span>
            </button>
        </div>
    </div>

在用户选择“确定”或“否”之前不会发生任何事情。

如果用户选择“确定”，则取决于模态是作为添加、删除还是更新（放置、删除、post）请求打开的，应调用适当的函数 - 并且模态 window关闭。

Answer 1

你可以用这个

this.modalService.afterClosed().subscribe(result => {
  console.log('The dialog was closed');
  this.animal = result;
});

我也想参考 material 文档 here

Answer 2

我确实找到了答案：

在：

openProofWindow(content, target): void {
 this.modalService.open(content, target);

我没有向 modalService.open 添加参数，而是设置了 public 变量。

public updateType: string;

openProofWindow(content, target): void {
this.updateType = target;
 this.modalService.open(content);

然后，在 'OK' 按钮中我进行了额外调用：

<button type="button" class="btn col-2 btn-modal btn-success" aria-label="ok" ngbAutofocus (click)="confirmedEdit(); modal.close('Ok click');">
                <span aria-hidden="true">Ok</span>

我需要添加函数来引用变量集：

confirmedEdit(): void {
  console.log(this.updateType);
}

这有效。

在执行下一个函数之前，如何等待来自 Angular bootstrap 模态 window 的响应？

How do I wait for response from an Angular bootstrap modal window before executing next function?

modal-dialog

response

angular