1

为了显示错误消息，我想在 Promise 中打开一个从另一个模式解析的模式。场景是这样的：

  1. 当用户单击按钮时，会弹出一个模式并显示一个表单。
  2. 用户输入必要的信息后，模态框关闭并检查用户输入的信息。
  3. 如果输入正常，则视图更新；否则打开另一个模态（错误模态）。用户应该能够通过按“enter”键来关闭错误模式。

打开错误模式通常集中在关闭按钮上。但是，当我在另一个模态的承诺中打开模态时，自动对焦不起作用。这会导致奇怪的行为，即当用户按下“enter”键时，应用程序再次执行 1 并再次打开输入模式 - 而不关闭错误模式。

这是处理模态的代码：

openForm() {
    this.ngbModal.open(FormModalComponent).then(
      (success) => {
        const inputIsOkay = checkInput(success);
        if (inputIsOkay) {
          // Updating the view
        } else {
          this.ngbModal.open(ErrorModalComponent);
        }
      },
      (cancel) => {}
    );
  }

我们尝试了几种方法来解决此问题：

  1. 使用 NgZone：我们不是简单地打开模式，而是将打开封装在 ngZone.run() 中。这不会改变自动对焦行为。this.ngZone.run(()=>this.ngbModal.open(ErrorModalComponent))不关注错误模式的按钮。
  2. 使用 ChangeDetectorRef：错误模式组件的 ngOnChanges() 方法未触发。
  3. 在错误模式的按钮上使用 ngbAutofocus 指令：这不会将焦点设置到按钮。
  4. 使用 setTimeout()：我们将模态的打开封装在一个 setTimeout() 方法中。setTimeout(()=>this.ngbModal.open(ErrorModalComponent));现在自动对焦功能。但是，这感觉不对。

我的问题：处理自动对焦问题的正确和“ng-bootstrap”方式是什么？

4

0 回答 0