Question

离子滑块组件存在问题。我在我的ion-slide中调用了一个方法，但注意到这个方法被称为 RIDICULOUSLY OFTEN ，我不知道为什么。它也会大大减慢一切。

最初该方法被调用900次（即使我只显示100张幻灯片）并且最轻微的幻灯片拖动再次触发900方法调用，因此只需从第一张幻灯片滑动到第二张幻灯片，触发5000次以上，取决于我滑动的速度。

任何想法为什么？我使用的是Ionic 4.4，Angular 5.0.3和Ionic-Angular 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

我建议将组件上的ChangeDetectionStrategy更改为“OnPush”:(请在此处查看更多信息：angular change detection explained）

之后您的组件将如下所示：

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>

<强>解释

随着ChangeDetectionStrategy的更改，你基本上告诉angular你知道什么时候应该重新渲染组件，如果发生这个事件，你可以通过调用markForCheck()告诉它。因此，每次幻灯片更改时，都会调用slideChanged()方法，并且我们明确告诉angular它应该重新呈现此组件。重新呈现组件时，应再次执行方法myMethod()并显示更新的内容。这样，您就拥有了一个性能更高的组件，方法myMethod()仅在初始化时或在您明确告知时调用。

离子离子滑动性能问题，方法调用过于频繁

1 个答案: