ngbModal.open返回的Promise链被跳过

Question

我正在组件中实现数据编辑。首先，我必须检查其中一个数据字段是否已更改，如果已更改，则应打开一个确认弹出窗口。如果用户确认更改，数据将被更新。

从updateData()方法，我调用isChangeConfirmed()方法，该方法打开弹出窗口并检查是否在弹出窗口上单击了保存按钮。如果是，则返回true。我希望控件在调用弹出窗口并检查结果后返回到updateData()方法。在现实中，数据首先被保存，然后弹出窗口出现。我做错了什么？

component.html

<button id="saveButton" type="button" (click)="updateData()" translate>BUTTON.SAVE</button>

<!-- POPUP -->
<ng-template #editModal let-modal>
<button type="submit" id="modalConfirmButton" (click)="modal.close('save')" class="btn btn-primary" translate>BUTTON.CONFIRM</button>
<button type="reset" id="modalCancelButton" (click)="modal.close('cancel')" class="btn btn-primary" translate>BUTTON.CANCEL</button>
</ng-template>

组件.ts

updateData() {
if (this.isChangeConfirmed()) {
// Some code which updates data
}
}
isChangeConfirmed(): boolean {
if (this.oldValue != this.newValue) {
this
.ngbModal
.open(this.editModal, { ariaLabelledBy: 'editModal' })
.result
.then((result) => {
return result == "save";
}, (reason) => {
return false;
});
}
return true;
}

Answer 1

问题是，当您打开模态时，(result) => { /*asynchronous part*/ }和(reason) => { /*asynchronous part*/ }中的部分异步运行。与上下文之外的部件相比，无法确定这些部件何时运行。您的return false;语句在异步上下文中，但return true;在异步上下文之外。因此，即使运行return false;语句，您也无法知道它何时发生，因为您不知道this.ngbModal.open()何时会生成result或reason。在你的情况下，似乎不够快，return true;更快。但关键是不可能知道。

这一切都很好，但也不能将return true;放在(result) => {... return true;}中，因为我想编译器会抱怨没有返回语句。

有两种方法可以解决它，我可以想到：

• 您去掉了单独的函数，将所有内容放在一个函数中，并将// Some code which updates data放在(result) => {... /* Some code which updates data*/ }中
• 或者，如果您真的想拥有一个单独的函数，那么您需要做的不是返回boolean，而是返回Observable，并在updateData()中订阅该Observable。查找如何将两个答案(result)和(reason)管道传输到一个单独的Observable中，如何将它们连接起来，从中创建一个Observable，然后返回

如果你选择第二个选项，我建议你看看RxJS运算符(https://rxjs.dev/guide/operators)。此外，阅读有关反应式编程的文章也很有用。