Angular / ng-bootstrap - Изменить индикатор выполнения с текущим слайдом - PullRequest
Новая
       7

Angular / ng-bootstrap - Изменить индикатор выполнения с текущим слайдом

0 голосов
/ 19 февраля 2019

Мое намерение состоит в том, чтобы изменять ширину индикатора выполнения с каждым слайдом.В настоящее время я использую индикатор выполнения, предоставленный bootstrap.Пока что я вызываю событие в HTML с каждым слайдом.Это событие извлекает эту информацию о слайде: 

Console:
{prev: "ngb-slide-0", current: "ngb-slide-1", direction: "left"}


Индикатор выполнения извлекает информацию о ширине из currentSlide (app.component.ts), которая отлично работает: 

<div class="progress">
    <div class="progress-bar" role="progressbar" [style.width.%]="currentSlide"></div>
  </div>


Прогресс машинописи до сих пор: 

export class AppComponent {

  public currentSlide: number;

  images = ['assets/images/image1.jpg', 'assets/images/image2.jpg', 'assets/images/image3.jpg'];

  changeProgress(slide: any): void {
    console.log(slide);
  }
}


Мой путь решения в словах: 

if current: ngb-slide-0 then currentSlide = 33,33
if current: ngb-slide-1 then currentSlide = 66,66 
if current: ngb-slide-2 then currentSlide = 100

Как преобразовать эти слова в код?
Заранее спасибо, Тим



Остальная часть HTML (Пример слайдера): 

<div class="container">
  <div class="row">
    <div class="col-12">
      <ngb-carousel *ngIf="images" (slide)="changeProgress($event)">
        <ng-template ngbSlide>
          <img [src]="images[0]" alt="First slide">
        </ng-template>
        <ng-template ngbSlide>
          <img [src]="images[1]" alt="Second slide">
        </ng-template>
        <ng-template ngbSlide>
          <img [src]="images[2]" alt="Third slide">
        </ng-template>
      </ngb-carousel>
    </div>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

Попробуйте этот код: 

// Add the caroussel to you component class, so you can access the slides array
@ViewChild(NgbCarousel) ngbCarousel;

....

changeProgress(slide: any): void {
    // Find the current slide index.
    let slideIndex = this.ngbCarousel.slides._results.findIndex( elem => {
      return elem.id == slide.current;
    });

    // Convert it to a percentage
    this.currentPercentage = (slideIndex + 1) / this.images.length * 100;
}
0 голосов
/ 19 февраля 2019

Создайте переменную, в которой будет отображаться текущий процент прогресса на слайдах, и измените это значение при запуске метода changeProgress и привяжите этот процент к индикатору прогресса следующим образом: 

<div class="progress-bar active" role="progressbar" [style.width.%]="currentPercentage"
             [attr.aria-valuenow]="currentPercentage" aria-valuemin="0" aria-valuemax="100">{{this.currentPercentage}}%</div>

и в вашемкомпонент должен выглядеть примерно так 

export class AppComponent {

  public currentSlide: number;
  public currentPercentage: number;

  images = ['assets/images/image1.jpg', 'assets/images/image2.jpg', 'assets/images/image3.jpg'];

  changeProgress(event: any): void {
    this.currentSlide = Number(event.current.substring(10));//10 because you want to remove the string 'ngb-slide-' and get only the selected image
    this.currentPercentage = this.currentSlide / this.images.length * 100;
  }
}

Надеюсь, это поможет!и, таким образом, вы можете в будущем добавлять больше изображений в слайд-шоу и иметь динамический код (я бы предложил использовать ng-For для отображения всех ng-шаблонов вашего карусели)

...