モーダルメモリリークが多く追加されました。

Question

ngx-bootstrapモーダルを使ってAngular 4アプリケーションを大きく開発しています。私は現在、モーダルを開くためのテンプレート+ 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> 

modalRef.hide（）を呼び出すActionViewComponent内のボタン。

モーダルを開くほどメモリ使用量が大幅に増加します。実際、モーダルを約5回開いた場合、アプリケーションは遅くなり、ほとんど使用できなくなります。これは、TableViewComponentに多くの行がある場合に特に顕著です。

モーダルを使用する方法に問題がありますか？これはngx-bootstrapモーダルに関連する問題ですか？または、ブラウザに関連する問題であり、避けられないものですか？私は現在Chrome 62で開発中です。

私は、onDestroyがモーダル内のTableViewComponentで呼び出されないことを確認しました。別のページコンポーネントに移動すると呼び出されることはありませんが、ページからナビゲートするときにonDestroyが呼び出される別のテーブル（テンプレートにはありません）があります。

フィードバックは非常に高く評価されています。私はこのために長続きしてきました。

Answer 1

これは残念なことにngx-bootstrapの問題です。プルリクエスト（https://github.com/valor-software/ngx-bootstrap/pull/3179）を作成しました。これで、私のPRがマージされ、新しいバージョンがリリースされるとすぐに修正されます。