最简单的角度旋转木马

时间:2017-08-24 15:06:34

标签: angular typescript

我试图制作最简单的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元素吗?我的点击代码似乎没有做任何事情!

4 个答案:

答案 0 :(得分:2)

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

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;
    }


}

答案 1 :(得分:0)

好的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;
  }

} 

答案 2 :(得分:0)

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

Ancular carousel

答案 3 :(得分:0)

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

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