Arhn - архитектура программирования

Как получить экземпляр ion-слайдов

Я использую Ionic 2 ion-slides и хотел бы вызвать на нем некоторые методы экземпляра. У меня есть следующая разметка:

<ion-content padding>
  <ion-slides (ionDidChange)="onSlideChanged($event)" id="loopSlider">
   <ion-slide *ngFor="let slide of slides">
    <h1>{{ slide.title }}</h1>
  </ion-slide>
</ion-slides>
</ion-content>

Я попытался использовать следующий код, который я нашел в (возможно, устаревшем) примере:

 private gotoSlide(index: number): void {
   this.sliderComponent = this.app.getComponent('loopSlider');
   this.sliderComponent.slider.slideTo(index);
  }

но this.app.getComponent('loopSlider'); всегда возвращает null.

Кто-нибудь знает, как получить экземпляр компонента, чтобы я мог использовать его API?

angular ionic2
06.08.2016

Ответы:


1

Согласно документации Ionic, вы можете сделать это, используя @ViewChild:

import { Component, ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';
...

@Component({
  ...
})
class MyPage {
  @ViewChild('loopSlider') sliderComponent: Slides;

  ...
}
06.08.2016
  • Большое спасибо за это! А там прямо в доке (что я пропустил) 06.08.2016
  • Для всех, кто все еще сталкивается с проблемами: убедитесь, что вы действительно импортировали Slides! 04.12.2017

    • 2

    Теперь, когда Ionic4 отсутствовал какое-то время, вероятно, нецелесообразно обновлять подобные ответы для него.

    import { IonSlides } from '@ionic/angular';

export class...
@ViewChild(IonSlides) productSlider: IonSlides;
    13.05.2019
  • Я не могу поверить, что они даже не удосужились обновить свою документацию по этому поводу. Огромное спасибо. 13.06.2019
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..