イオンイオンスライド性能の問題、あまりにも頻繁なメソッドコール

Question

イオンスライドコンポーネントに問題があります。私はion-slideの中でメソッドを呼び出していますが、このメソッドはRIDICULOUSLY OFTENと呼ばれています。また、すべてが大幅に遅くなります。

最初はメソッドが900回（私は100個のスライドしか表示していませんが）呼び出され、スライドのわずかなドラッグで再び900メソッド呼び出しがトリガーされます。最初のスライドから2番目のスライドまでスワイプするだけです私はどれくらいゆっくりとスワイプするかによって、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

私はあなたのコンポーネントに "OnPush" にChangeDetectionStrategyを変更することをお勧め

は：

：（ angular change detection explainedここではより多くの情報を参照してください）

コンポーネントがなくなるその後、このようにk個：

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

説明：

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テンプレートは、次のようになりChangeDetectionStrategyの変更に伴い

あなたは基本的にはときにあなたが知っている角度伝えますコンポーネントを再描画する必要があります。このイベントが発生した場合は、markForCheck()を呼び出して通知します。したがって、スライドが変更されるたびにslideChanged()メソッドが呼び出され、このコンポーネントを再レンダリングする必要があることを明示的に指示します。コンポーネントが再レンダリングされると、メソッドmyMethod()が再度実行され、更新されたコンテンツが表示されます。このようにして、より性能の高いコンポーネントが得られます。myMethod()は、初期化時または明示的に指示されたときにのみ呼び出されます。