离子离子 - 滑动性能问题，太常见的方法调用

Question

我对离子滑动组件有问题。我在我的ion-slide中调用一种方法，但注意到此方法被称为经常被称为，我不确定为什么。它也大大减慢了一切。

最初，该方法被称为900次（即使我只显示100张幻灯片），并且幻灯片的最小阻力再次触发了900方法调用，因此只需从第一台到第二个幻灯片，即可触发方法。5000次以上，具体取决于我滑动的速度。

有什么想法？我使用的是离子4.4，Angular 5.0.3和离子角3.9.2。

模板

<ion-content>
  <ion-slides>
    <ion-slide *ngFor="let slide of slides">
      <div>
        {{slide}} - {{myMethod()}}
      </div>
    </ion-slide>
  </ion-slides>
</ion-content>

组件

@Component({
  selector: 'page-my',
  templateUrl: 'my-page.html'
})
export class MyPage implements OnInit {
  slides: number[] = [];
  methodCounter: number = 0;
  ngOnInit() {
    let numberOfSlides = 100;
    for (var i = 0; i < numberOfSlides; i++) {
      this.slides[i] = i;
    }
  }
  public myMethod(): string {
    console.log('myMethod called ' + this.methodCounter++);
    return 'foo';
  }
}

https://www.youtube.com/watch?v=5-l4zoix5ew

Answer 1

我建议将您的组件上的更改详细信息更改为" Onpush" ：（请参阅此处：在此处查看更多信息：解释了角度更改检测）

您的组件之后看起来像这样：

import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
@Component({
  selector: 'page-my',
  templateUrl: 'my-page.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyPage implements OnInit {
  slides: number[] = [];
  methodCounter: number = 0;
  ngOnInit() {
    let numberOfSlides = 100;
    for (var i = 0; i < numberOfSlides; i++) {
      this.slides[i] = i;
    }
  }
  public slideChanged(): void {
    console.log('slide changed');
    this.cd.markForCheck();
  }
  public myMethod(): string {
    console.log('myMethod called ' + this.methodCounter++);
    return 'foo';
  }
}

您的HTML模板看起来像这样：

<ion-slides (ionSlideDidChange)="slideChanged()">
    <ion-slide *ngFor="let slide of slides">
      <div>
        {{slide}} - {{myMethod()}}
      </div>
    </ion-slide>
  </ion-slides>
</ion-content>

说明：

随着更改的更改，您基本上告诉Angular，您知道何时应该重新渲染组件，如果发生此事件，则通过调用markForCheck()来告诉它。因此，每次更改幻灯片时，都会调用slideChanged()方法，我们明确地告诉Angular，它应该重新渲染该组件。重新渲染组件后，应再次执行方法myMethod()并显示更新的内容。这样，您就有一个更具性能的组件，而方法myMethod()仅在初始化时或明确说明时被调用。