Утечка модальной памяти по мере добавления модальных окон

Я разрабатываю приложение Angular 4 с использованием модальных окон ngx-bootstrap. В настоящее время я использую метод 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 прямо сейчас.

Я убедился, что onDestroy никогда не вызывается для TableViewComponent внутри модального окна. Он даже не вызывается, если я перехожу к другому компоненту страницы, хотя в другой таблице (не в шаблоне) действительно вызывается onDestroy при переходе со страницы.

Мы очень ценим любые отзывы - я слишком долго зацикливался на этом.


person Ben Atlas    schedule 30.11.2017    source источник


Ответы (1)


К сожалению, это проблема ngx-bootstrap. Я создал запрос на перенос (https://github.com/valor-software/ngx-bootstrap/pull/3179), так что это будет исправлено, как только мой PR будет объединен и будет выпущена новая версия.

person IlyaSurmay    schedule 04.12.2017
comment
Спасибо!! Я добавил эту строку кода в пакет, и, похоже, проблема решена. Когда ждать нового релиза? - person Ben Atlas; 04.12.2017
comment
Он уже объединен. Обычно у нас выпускаются еженедельные выпуски, поэтому я предполагаю, что новая версия выйдет к концу этой недели. - person IlyaSurmay; 04.12.2017
comment
Исправлено в 2.0.0-beta.10 - опубликовано как ngx-bootstrap @ next - person IlyaSurmay; 05.12.2017