Question

试图在尝试使用ng-bootstrap打开模式时无法理解的奇怪行为

 openModal(content,modalActionType) {
        this.modalActionType = modalActionType;
        console.log(this.modalActionType);
        open(content);
        return false;
  }
  open(content) {
        this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'})
        .result.then((saveOrCancel) => {
        }, (dismissReason) => {});
   }

HTML

<a class="dropdown-item" (click)="openModal(content,'Reset')">Reset Password</a>

当我单击“重置密码”时，尽管我从openModal函数返回false，但打开了一个新标签。

奇怪的是，下面的代码可以正常工作，并且模式已按预期打开。为什么会这样？

openModal(content,modalActionType) {
    this.modalActionType = modalActionType;
    console.log(this.modalActionType);
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'})
    .result.then((saveOrCancel) => {
    }, (dismissReason) => {});
    return false;
  }

Answer 1

问题出在您的openModal方法中：

openModal(content,modalActionType) {
    this.modalActionType = modalActionType;
    console.log(this.modalActionType);
    open(content);
    return false;
}

方法open(content);的第三行应更改为this.open(content);，以确保它调用您在组件TypeScript文件而不是open中定义的window.open()方法-将打开一个新的窗口或标签（取决于浏览器）。

请参阅this StackBlitz进行演示。如果将modal-basic.ts中的第18行从this.open(content);更改为open(content);，它将打开一个新的浏览器标签，而不是打开模式。

为什么Modal会打开一个新的弹出窗口？

1 个答案: