Question

我们正在开发一个具有表格网格的应用程序，每个网格显示不同。附加具有切换功能的HTML片段，在2个网格之间连续切换导致“内存占用”或“内存”增长。如果应用程序使用大约10-15分钟，Chrome浏览器崩溃。我使用chrome dev工具做了一些分析，发现DOM没有分离。它不断积累

main.html中：

    <div id="compDetailsDiv" [ngClass]="showListView() ? 'height126' : ''">
        <div *ngFor="let comp of compPropOrigIndexArr; let i=index;">
            <d-pro-comparables [compProp]="compPropOrigIndexArr[i] 
              ['comp']" [index]="i" [origIndex]="compPropOrigIndexArr[i] 
               ['index']" 
              [productName]="productName" *ngIf="!hideCriteriaCompCards(i) 
              && 
             !showListView()"></d-pro-comparables>
        </div>

        <div *ngFor="let comp of compPropOrigIndexArr; let i=index;">
            <d-pro-comparable-list  [compProp]="compPropOrigIndexArr[i] 
            ['comp']" [index]="i" [origIndex]="compPropOrigIndexArr[i] 
            ['index']" [productName]="productName" 
            *ngIf="!hideCriteriaCompCards(i) && showListView()"></d-pro- 
            comparable-list>
        </div>
    </div>

组件HTML :( d-pro-comparables）

<div id="compList{{index}}" [ngClass]="{'sellectedBackground' : 
   isSelected}">
  <div id="comparableDiv" [ngClass]="{'highlightBorderGreen': isHighlighted 
     && isSelected, 'highlightBorderBlue': isHighlighted && !isSelected}" 
     (click)="compClick();" (mouseenter)="highlightCompClickHover()" 
     (mouseleave)="compDivOnMouseOut()" (dblclick)="benchmarkComp()">
<ul>
  <li class="addressCell" title="{{compPropUIObj['displayAddressLine1']}}, 
     {{compPropUIObj['displayAddressLine2']}}" (click)="searchAddress()"> 
     {{compPropUIObj['displayAddressLine1']}}, 
     {{compPropUIObj['displayAddressLine2']}}</li>
  <li class="bedsCell">{{compPropUIObj['beds']}}</li>
  <li class="bathsCell">{{compPropUIObj['baths']}}</li>
  <li class="sizeCell">{{compPropUIObj['size']}}</li>
  <li class="hTypeCell" title=" 
    {{compPropUIObj['hTypeStdLandUseCode']}}"> 
    {{compPropUIObj['hTypeStdLandUseCode']}}</li>
  <li class="yearBuiltCell">{{compPropUIObj['hAge']}}</li>      
  <li class="dateCell">
        <span>{{compPropUIObj['saleListDate']}}</span>
    </li>
  <li class="priceCell">
        <span >{{compPropUIObj['saleListPrice']}}</span>

    </li>
  <li class="hSimilarityCell">
      <div class="hSimilarityChart">
          <img [src]="hSimilarityDataUrl" class="chartImageSize">
      </div>
      <div class="absoluteHScore"> 
       {{compPropUIObj['propertySimilarity']}}</div>       
  </li>
  <li class="nSimilarityCell">        
      <div class="nSimilarityChart">
          <img [src]="nSimilarityDataUrl" class="chartImageSize">
      </div>
      <div class="absoluteNeighborScore"> 
       {{compPropUIObj['nSimilarity']}}</div>        
  </li>
  <li class="removeCell">
      <span [hidden]="removedPropIndexArr.indexOf(origIndex)>-1" 
       (click)="removeComp();">Remove</span>
      <span [hidden]="removedPropIndexArr.indexOf(origIndex)==-1" 
       (click)="addComp();">Add</span>
  </li>
  </ul>     
  </div>
  </div>

我在所有组件中添加了ngOnDestroy，代码如下：

  ngOnDestroy() {
     Object.keys(this).map(k => {
     this[k] = null;
     })
  }

DOM内存泄漏Angular 4

0 个答案: