从服务中获取Angular2/4 Carousel，以循环播放图像 [英] Get Angular2/4 Carousel from service to loop over images

问题描述

我在Angular有一个旋转木马.将幻灯片图像嵌入html相对简单，但是我想从服务数组中插入它们.

I have a carousel in Angular. It is relatively simple to embed slide images in the html, but I want to insert them from an array in a service.

我的html看起来像这样:

My html looks like this:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <ul class="carousel-item active">
      <li *ngFor="let image of visibleImages" >
        <img src="{{image.url}}" class ="tn">
      </li>
    </ul>

  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

我对该组件的ts看起来像这样:

My ts for the component looks like this:

import { Component, OnInit } from '@angular/core';
import { ImageServiceService } from '../image-service.service';

@Component({
  selector: 'app-image-slider',
  templateUrl: './image-slider.component.html',
  styleUrls: ['./image-slider.component.css']
})
export class ImageSliderComponent implements OnInit {
    visibleImages: any[] = [];

  constructor(private imageService: ImageServiceService) {
    this.visibleImages = this.imageService.getImages();
  }

  ngOnInit() {
  }

}

我对服务的了解如下:

import { Injectable } from '@angular/core';

@Injectable()
export class ImageServiceService {

    visibleImages = [];
    getImages(){
        return this.visibleImages = IMAGES.slice(0);
    }

    getImage(id: number){
            return IMAGES.slice(id).find(image => image.id === id);
    }

}

const IMAGES = [
    {"id": 1, "category": "paintings", "caption": "a painting", "url": '../assets/SBI_Slide_1.jpg'},
    {"id": 2, "category": "paintings", "caption": "a painting", "url": '../assets/Eagle_Slide_2.jpg'},
    {"id": 3, "category": "paintings", "caption": "a painting", "url": '../assets/Knot_Slide_3.jpg'},
];

首先，我想遍历图像，而不是一次显示所有图像.如果循环的各个阶段之间有等待，那会很好吗?

First I want to loop over the images, instead of displaying them all at once. It might be good if there was a wait between stages of the loop?

接下来，我想使用一种方法触发循环中的前进或后退吗?

Next I want to trigger going forward or backward through the loop with a method?

推荐答案

尝试此程序包.它应该可以满足您想要完成的任务.

Try this package. It should work for what you want to accomplish.

您的幻灯片可能看起来更像这样，它更加模块化和简洁:

Your slideshow could look something more like this, which is more modular and cleaner:

<div *ngFor="let slide of slides" [class.hide-slide]="!slide.selected" class="text-center slides margin-bottom">
  <app-slide
    [imageUrl]="slide.url"
    [slideTitle]="slide.title"
    [bodyText]="slide.body"
 ></app-slide>
</div>

请查看此插件，以了解我基于

Check out this plunkr for an implementation I used based on W3 Schools CSS slideshow.

这篇关于从服务中获取Angular2/4 Carousel，以循环播放图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！