Как определить, когда Ionic Slides готова?

Question

Я использую компонент Ionic ion-slides для отображения карусели SKU. Текущий SKU должен быть выбран из списка SKU.

Дело в том, что Ionic Slides, похоже, не готов к немедленному обращению, даже вызывается внутри углового ngAfterViewInit крючка. Сначала я должен использовать тайм-аут.

Информация о моей конфигурации:

   ionic (Ionic CLI)  : 4.0.1 (/Users/rguerin/.nvm/versions/node/v6.10.1/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.1.1
   @ionic/app-scripts : 1.3.7

System:

   NodeJS : v6.10.1 (/Users/rguerin/.nvm/versions/node/v6.10.1/bin/node)
   npm    : 3.10.10
   OS     : macOS High Sierra

Файл моего компонента:

import { Component, OnInit, ViewChild, Input, Output, EventEmitter, AfterViewInit } from '@angular/core';
import { Logger, AppConfig } from '@instoreapps/core/dist';
import { Slides } from 'ionic-angular';

import { SkuResult } from '../../models/item.model';

import * as _ from 'lodash';


/**
 * Angular component to show size variation (or capacity in ml) of one product in carousel.
 * @implements OnInit
 */
@Component({
    selector: 'isa-item-size',
    templateUrl: './item-size.component.html',
    providers: [
        { provide: Logger, useFactory: (config: AppConfig) => new Logger(config, 'item size'), deps: [AppConfig] }
    ]
})
export class ItemSize implements OnInit, AfterViewInit {

    @ViewChild(Slides) public containersSlides: Slides;

    @Input() public defaultSkuIndex: number;
    @Input() private skuList: SkuResult[];
    @Output() private containerSelected: EventEmitter<any> = new EventEmitter();

    /**
     * Index of the selected container.
     * Serve to apply specific css style 
     * on selected container. 
     */
    private selectedIndex: number = 0;

    constructor(private logger: Logger) { }

    /**
     * Select default sku available and emit 
     * event to parent component to select it inside the carousel
     */
    ngAfterViewInit(): void {

        this.logger.trace('Entering ngAfterViewInit method', this.selectedIndex, this.defaultSkuIndex);

        setTimeout(() => {
            this.selectContainer(this.defaultSkuIndex);
        }, 300);
    }

    /**
     * Event triggered after the slide change is done
     */
    public onSlideDidChange(event: any): void {
        this.containerSelected.emit(this.defaultSkuIndex);
        this.selectedIndex = this.defaultSkuIndex;
    }

    /**
     * Function to use from parent component @see {ItemDetails}
     * to set selected container and make carousel slide to it.
     * @param {number} index of sku.
     */
    selectContainer(index: number): void {

        this.logger.trace('Entering selectContainer method with index : ', index, this.selectedIndex);

        if (index !== this.selectedIndex) {

            this.selectedIndex = index;
            this.containersSlides.slideTo(_.floor(index / 2));
        }
    }
}

Мой HTML-файл:

<ion-list id="items-colors">

    <ion-list-header id="items-colors-header">
        {{ 'items.availableColors' | translate }}
    </ion-list-header>

    <ion-item>
        <ion-slides id="item-colors" (ionSlideDidChange)="onSlideDidChange($event)">
            <ion-slide *ngFor="let item of skuList; let i = index">
                ...
            </ion-slide>
        </ion-slides>
    </ion-item>
</ion-list>

Я хотел бы подавить тайм-аут и вызвать метод selectContainer напрямую, но при этом у меня появляется следующая ошибка:

undefined is not an object (evaluating 's._snapGrid.length')"

Кто-нибудь знает обходной путь?