如何在 Angular 的 ngx owl carousel 中设置活动幻灯片

【问题标题】：How to set the active slide in ngx owl carousel in Angular如何在 Angular 的 ngx owl carousel 中设置活动幻灯片
【发布时间】：2021-02-25 12:23:58
【问题描述】：

我正在尝试根据索引将幻灯片设置为活动幻灯片。我试图将课程设置为活动和中心。以下示例中的 newsId 值来自我正在获取并验证的另一个页面。

<owl-carousel-o [options]="newsOptions" class="slider-service">
    <ng-template carouselSlide [ngClass]="{'active center': news.newsId == newsId}" *ngFor="let news of newsSlides">
        .....
    </ng-template>
</owl-carousel-o>

还有其他方法可以设置活动幻灯片吗？

【问题讨论】：

标签： angular owl-carousel

【解决方案1】：

您必须使用 owlCar.to(slideIndex:string) 函数。

为每张幻灯片设置 ID：

<owl-carousel-o [options]="newsOptions" class="slider-service">
    <ng-template carouselSlide *ngFor="let news of newsSlides" [id]="news.newsId">
        .....
    </ng-template>
</owl-carousel-o>

并在您的组件中定义 owl carousel 变量并像这样设置活动幻灯片

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {

  @Input() newsId: string;
  @ViewChild('owlCar', { static: false }) owlCar: any;

  ngOnInit(): void {
    this.owlCar.to(this.newsId);
  }
}

请记住 newsId 和 news.id 必须是字符串。

【讨论】：