Блог

Главная - Вопросы по программированию - Как установить выбранное изображение в качестве первого изображения, отображаемого в карусели начальной загрузки в Angular?

Как установить выбранное изображение в качестве первого изображения, отображаемого в карусели начальной загрузки в Angular?

#javascript #angular #bootstrap-4 #angular-ui-bootstrap

Вопрос:

Я создал небольшой код tuto, в котором у меня есть список карточек. на этих картах у меня есть событие щелчка, которое передает индекс этих карт, и я буду использовать его позже, чтобы установить первое изображение, которое будет отображаться в карусели. Этот индекс передается через службу, совместно используемую с созданными компонентами.

на данный момент этот индекс успешно прошел, когда я получу его в компоненте «карусель», вставьте его <ngb-carousel [activeId]="activeIndex"> , как указано в документе

  /**
 * The slide id that should be displayed **initially**.
 *
 * For subsequent interactions use methods `select()`, `next()`, etc. and the `(slide)` output.
 */
 activeId: string;

Однако то, что я сделал, не имеет никакого эффекта, потому что карусель все равно каждый раз показывает мне первое изображение. Я что-то пропустил?

здесь вы можете найти исходный код: https://github.com/agentjoseph007/modal-carousel

Любая помощь будет очень признательна.

Комментарии:

1. Попробуйте установить активный индекс при просмотре в жизненном цикле

2. я попытался использовать крюк жизненного цикла инициализации представления, к сожалению, он тоже не работает.

3. вам нужно дать свойство [id] каждому слайдеру-это строка — <ng-template ngbSlide [id]="one">..</ng-template> , затем вы можете использовать this.activeId="one"

Ответ №1:

попробуйте поиграть с изображениями в конструкторе карусели, так как это массив, который вы просто перемещаете. вы выбираете индекс и перемещаете слайд, соответствующий этому индексу, на первую позицию. Я бы рекомендовал использовать *ngFor в вашем шаблоне карусели.

в carousel.component.html

 <ngb-carousel (slide)="onSlide($event)">
  <ng-container *ngFor="let slide of slides; let index = index">
    <ng-template ngbSlide [id]="index">
      <div class="picsum-img-wrapper">
        <img [src]="slide.image" [alt]="slide.alt">
      </div>
      <div class="carousel-caption">
        <h3>{{slide.label}}</h3>
        <p>{{slide.content}}</p>
      </div>
    </ng-template>
  </ng-container>
</ngb-carousel>

Возможно, у сообщества могут быть другие предложения о том, как обрабатывать слайды, но я предлагаю вам этот код
и в carousel.component.ts

   photos = [944, 1011, 984].map((n) => `https://picsum.photos/id/${n}/900/500`);
  slides = [
    {
      index: 0,
      image: this.photos[0],
      label: 'First slide label',
      content: 'Nulla vitae elit libero, a pharetra augue mollis interdum.',
      alt: 'my first slide image'
    },
    {
      index: 1,
      image: this.photos[1],
      label: 'Second slide label',
      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
      alt: 'my first slide image'
    },
    {
      index: 2,
      image: this.photos[2],
      label: 'Third slide label',
      content: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.',
      alt: 'my first slide image'
    }
  ];

  ...

  constructor(private imageHandlerService: ImageHandlerService) {
    console.log('CarouselComponent');
    console.log(this.imageHandlerService.selectedIndex);
    this.slides.forEach((element, i) => {
      if (element.index === this.imageHandlerService.selectedIndex) {
        this.slides.splice(i, 1);
        this.slides.unshift(element);
      }
    });
  }

надеюсь, это поможет 😉

Метки: ,