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

Question

我正在使用 Angular 4 和 ng-bootstrap carousel。我想在加载时跳转到最后一张幻灯片，尝试使用 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
  }
}