3

我对 ion-slides 组件有疑问。我在我的内部调用一个方法，ion-slide但注意到这个方法经常被称为RIDICULOUSLY，我不知道为什么。它还大大减慢了一切。

最初，该方法被调用了 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

4

1 回答 1

4

我建议将您组件上的 ChangeDetectionStrategy 更改为“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>

解释：

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

于 2017-12-10T16:11:29.050 回答