添加更多模态时模态内存泄漏

Question

我正在大量使用 ngx-bootstrap 模态开发 Angular 4 应用程序。我目前使用的是template + modalService的方式打开模态框。在单击事件期间，这行代码称为：

@ViewChild() worklistTemplate;
// ...
this.modalRef = this.modalService.show(this.worklistTemplate, this.config);

工作列表模板如下所示：

<ng-template #worklistTemplate>
  <app-action-view
    [leftButtons]="leftButtons"
    [labelHeader]="modalHeader"
    [labelIcon]="modalIcon"
    [modalRef]="modalRef">
    <div class="row modal-info-panel">
      <div class="col-xs-4 modal-user-info">
        <fa name="mars" class="gender-icon"></fa>
        <div class="field-panel">
          <input type="text"
            [ngModel]="rowInfo.lastName"
            [ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
            [disabled]="!modalFieldsEditable">
          <input type="text"
            [ngModel]="rowInfo.firstName"
            [ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
            [disabled]="!modalFieldsEditable">
          <div>
            <label for="modal-mrn">MRN --</label>
            <input id="modal-mrn" type="text"
              [ngModel]="rowInfo.mrn"
              [ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
              [disabled]="!modalFieldsEditable">
          </div>
          <div>
            <label for="modal-dob">DOB --</label>
            <input id="modal-dob" type="text"
              [ngModel]="rowInfo.birthDate"
              [ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
              [disabled]="!modalFieldsEditable">
          </div>
          <div class="edit-panel">
            <fa *ngIf=modalFieldsEditable class="worklist-edit-buttons green-hover link" name="floppy-o" tooltip="Save" (click)=saveChanges()></fa>
            <fa *ngIf=modalFieldsEditable class="worklist-edit-buttons red-hover link" name="times" tooltip="Cancel" (click)=toggleModalFields()></fa>
          </div>
        </div>
      </div>
      <div class="col-xs-8 modal-id-info">
        Associated ID
        <div class="full-width">
          <div class="row" *ngFor="let i of rowInfo.associatedIDs">
            <div class="col-xs-6 cell">{{i.id}}</div><div class="col-xs-6 cell">{{i.source}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="row" id="modal-table">
      <app-table-view
            [columns]="objDetailsCols"
            [tableData]="objDetailsData"
            [expandTemplate]="rowImageContainer"
            [expandColStyle]="expandColStyle">
      </app-table-view>
    </div>
    <div *ngIf="resolvePanelVisible" class="resolve-panel"
      [@slideRight]>
      <div class="resolve-label">
        <fa class="lt-icon" name="wrench"></fa>
        Resolve QA Issue
      </div>
      <div class="resolve-body">
        Hello, World!
      </div>
      <div class="resolve-footer">
        <a>Validate</a>
        <a>Resolve</a>
        <a>Reload</a>
        <a (click)="toggleResolvePanel()">Close</a>
      </div>
    </div>
  </app-action-view>
</ng-template>

可以通过在模态边界外单击来关闭模态，或者在 ActionViewComponent 中有一个调用 modalRef.hide() 的按钮。

随着越来越多的模式打开，内存使用量急剧增加。事实上，如果我打开模式大约 5 次，应用程序就会变得缓慢并且几乎无法使用。如果我们的 TableViewComponent 中有很多行，这一点尤其明显。

是我使用模态框的方式有问题，还是与 ngx-bootstrap 模态框有关？或者，问题是否与浏览器有关且不可避免？我现在正在 Chrome 62 上开发。

我已验证从未在模态内的 TableViewComponent 上调用 onDestroy。如果我导航到不同的页面组件，它甚至不会被调用，尽管另一个 table（不在模板中）在从页面导航时确实调用了 onDestroy。

非常感谢任何反馈 - 我在这个问题上被困了太久了。

Answer 1

不幸的是，这是 ngx-bootstrap 的问题。我创建了一个拉取请求 (https://github.com/valor-software/ngx-bootstrap/pull/3179)，所以一旦我的 PR 合并并发布新版本，这个问题就会得到修复。

添加更多模态时模态内存泄漏

Modal memory leak as more modals added

ngx-bootstrap

ngx-bootstrap-modal