跳转到加载 ngb-Carousel 时的最后一张幻灯片

Question

我正在使用 angular 4 和 ng-bootstrap 轮播。我想在加载时跳到最后一张幻灯片，尝试使用 activeId 但这没有帮助

<ngb-carousel [activeId]="1">

Example Plunker

Answer 1

代码中的更改

<!--check the template reference variable-->
<ngb-carousel #myCarousel="ngbCarousel" >
<!-- is "id={{i}} -->
  <ng-template ngbSlide *ngFor="let item of data;let i = index" id="{{i}}">
    <h1>{{item}}</h1>
  </ng-template>
</ngb-carousel>

您的 .ts 必须实现 onInit 并使用 ViewChild

import { Component, OnInit,  ViewChild} from '@angular/core';
import {NgbCarousel,NgbCarouselConfig} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-carousel-basic',
  templateUrl: 'src/carousel-basic.html',
  providers: [NgbCarouselConfig]
})
export class NgbdCarouselBasic implements OnInit {
  //reference to "myCarousel"
  @ViewChild('myCarousel') myCarousel: NgbCarousel;
  private data = ["Slide 1","Slide 2","Slide 3"]
  //I prefered use private for all injected component
  constructor(private config: NgbCarouselConfig) {
    this.config.interval = 10000;
    this.config.wrap = false;
    this.config.keyboard = false;
  }
  ngOnInit() {
    this.myCarousel.activeId='2';  //<--use this, begans 0
  }
}

Answer 2

如果有人想知道为什么 activeId 不适合你，

那么版本：

 "@ng-bootstrap/ng-bootstrap": "^4.0.4", // or above

您可以使用 NgbCarousel 提供的 select() 方法。

假设id是slideId-1然后做

 this.myCarousel.select('slideId-1');

在查看文件中：

<!--check the template reference variable-->
<ngb-carousel #myCarousel="ngbCarousel" >
<!-- is "id={{i}} -->
  <ng-template ngbSlide *ngFor="let item of data;let i = index" id="slideId-{{i}}">
    <h1>{{item}}</h1>
  </ng-template>
</ngb-carousel>

在 .ts 文件中：

import { Component, OnInit,  ViewChild} from '@angular/core';
import {NgbCarousel} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-carousel-basic',
  templateUrl: 'src/carousel-basic.html'
})
export class NgbdCarouselBasic implements OnInit {
  //reference to "myCarousel"
  @ViewChild('myCarousel') myCarousel: NgbCarousel;
  items: object[];

  constructor() {}

  ngOnInit() {
    this.loadMyItems(); // load items from an API
  }

  loadMyItems() {
    ...
    yourService.getItems().subscribe(
      response => {
        this.items = response.data;
        setTimeout(() => { this.scheduleCarousel.select('slideId-1') }); // if you are getting `.select() of undefined` error.
      }
    .....
  }
}

这里我提供了一个例子API，如果你有静态数据，可以按照上面的回答。

Answer 3

无需对您的 ts 文件进行任何更改。这里需要单引号：
<ngb-carousel [activeId]="'1'">

正如其他人提到的，您需要在模板中添加以下内容。
<ng-template ngbSlide *ngFor="let item of data;let i = index" id="{{i}}">

跳转到加载 ngb-Carousel 时的最后一张幻灯片

jump to last slide on load ngb-Carousel

ng-bootstrap

angular