Question

我试图制作最简单的Angular Carousel，以便更好地理解Angular。我知道我已经问了类似的角度问题，人们给了我很好的答案，我能够实现，但我提出的问题将有助于我更深入地了解Angular2 +和Typescript，所以请耐心等待。

到目前为止，我有：

HTML：

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

  <div class="carousel-inner" role="listbox">
      <img src="{{ this.showSlide(slides, i) }}" alt="slide" >
  </div>

 <button ng-click='getPrev(slides, i)'>Prev</button>

 <button ng-click='getNext(slides, i)'>Next</button>

</div>

TS：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-image-slider',
  templateUrl: './image-slider.component.html',
  styleUrls: ['./image-slider.component.css'],

})

export class ImageSliderComponent implements OnInit {

public slides: string [] = ['./assets/SBI_Slide_1.jpg', './assets/Eagle_Slide_2.jpg', './assets/Knot_Slide_3.jpg' ]
i: number;

showSlide(slides, i) {
    let slide = slides[i];
    return slide;
}

getPrev(slides, i) {
    i = i - 1;
    this.showSlide(slides, i)
}

getNext(slides, i) {
    i = i + 1;
    this.showSlide(slides, i)
}



  ngOnInit() {
    this.i = 0;
  }

}

为什么这不起作用？是因为我需要更新img html元素吗？我的点击代码似乎没有做任何事情！

Answer 1

更新：在我看到你找到路之前我发布了这个答案。我会指出一些小错误：

ng-click不是Angular指令，而是使用（单击）;

＆＃39;这＆＃39;无法从模板访问关键字，但属性是，因为Angular负责将模板绑定到类。

你应该在递增/递减之前检查值，因为你可能会发生不确定（即i值可能＆lt;那0或者＆gt; slides.length）

我会这样做，但要注意我没有跑：

<强> HTML

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

  <div class="carousel-inner" role="listbox">
      <img src="{{ getSlide() }}" alt="slide" >
  </div>

 <button (click)='getPrev()'>Prev</button>

 <button (click)='getNext()'>Next</button>

</div>

<强>打字稿：

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

@Component({
  selector: 'app-image-slider',
  templateUrl: './image-slider.component.html',
  styleUrls: ['./image-slider.component.css'],

})

export class ImageSliderComponent  {

    slides: string [] = ['./assets/SBI_Slide_1.jpg', './assets/Eagle_Slide_2.jpg', './assets/Knot_Slide_3.jpg' ]
    i=0;

    getSlide() {
        return this.slides[this.i];
    }

    getPrev() {
        this.i = this.i===0 ? 0 : this.i - 1;
    }
//edit here    
    getNext() {
        this.i = this.i===this.slides.length ? this.i : this.i + 1;
    }


}

Answer 2

好的Vega帮助（见上文） - 我找到了问题的答案。

我现在想要了解的是如何在方法中摆脱'this'。

HTML：

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

  <div class="carousel-inner" role="listbox">
      <img src="{{ showSlide(slides, i) }}" alt="slide" >
  </div>

 <button (click)="getPrev(slides, i)">Prev</button>

 <button (click)="getNext(slides, i)">Next</button>

</div>

TS：

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 {

public slides: string [] = ['./assets/SBI_Slide_1.jpg', './assets/Eagle_Slide_2.jpg', './assets/Knot_Slide_3.jpg' ]
i: number;

showSlide(slides, i) {
    let slide = slides[i];
    return slide;
}

getPrev(slides, i) {
    this.i = this.i - 1;
    this.showSlide(slides, i)
}

getNext(slides, i) {
    this.i = this.i + 1;
    this.showSlide(slides, i)
}



  ngOnInit() {
    this.i = 1;
  }

}

Answer 3

基于HammerJs和Angular 8，我制作了一个简单但功能强大的轮播：

Ancular carousel

Answer 4

如果您想更简单一些，则只能使用CSS，而无需Angular / TS / JS代码，请看一下本文：

https://css-tricks.com/css-only-carousel/

最简单的角度旋转木马

4 个答案: