引导轮播在 Angular 应用程序的所有页面中都不起作用答案

【问题标题】：Bootstrap carousel not working in all the pages in the angular application引导轮播在 Angular 应用程序的所有页面中都不起作用
【发布时间】：2021-08-09 12:23:05
【问题描述】：

我的应用程序中有多个页面，每个页面都有轮播。轮播应该自动滑动，但只有当我刷新页面时它才会自动滑动。例如：如果我在页面 A 中并刷新，则轮播工作正常。如果我转到第 2 页，第 2 页中的轮播不会自动滑动，但在刷新该页面后再次，第 2 页中的轮播工作正常。

下面是我的引导轮播代码。

<div id="carousel-example" class="carousel slide carousel-fade" data-interval="3000" data-ride="carousel">
  <div class="jumbotron">
    <!--Indicators-->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example" data-slide-to="1"></li>
      <li data-target="#carousel-example" data-slide-to="2"></li>
    </ol>
    <!--/.Indicators-->
    <!--Slides-->
    <div class="carousel-inner " role="listbox">
      <!--First slide-->
      <div class="carousel-item active">
        <div class="row">
          <div class="col-6 ">
            <h1>heading</h1>
            <p>text</p>
          </div>
          <div class="col-6">
            <img src="...."  style="width:100%"  height="250"></div>
          </div>
      </div>
      <!--/First slide-->
      <!--Second slide-->
      <div class="carousel-item">
        <div class="row">
          <div class="col-6 ">
            <h1>heading</h1>
            <p>text</p>
          </div>
          <div class="col-6">
            <img src="...."  style="width:100%"  height="250"></div>
          </div>
      </div>
      <!--/Second slide-->
      <!--Third slide-->
      <div class="carousel-item">
        <div class="row">
          <div class="col-6 ">
            <h1>heading</h1>
            <p>text</p>
          </div>
          <div class="col-6">
            <img src="...."  style="width:100%"  height="250"></div>
          </div>
      </div>
      <!-- Third slide-->
    </div>
  </div>
<!--/.Carousel Wrapper-->
</div>

我看到 .carousel 元素的 data-ride="carousel" 属性告诉引导程序在页面加载时立即开始动画轮播。如果这是问题，那么替代解决方案是什么？

【问题讨论】：

标签： html angular carousel

【解决方案1】：

您可以尝试在ngAfterViewInit() 方法中初始化轮播。

import { AfterViewInit, Component, ElementRef, OnInit } from '@angular/core';
declare var $: any; // used to access jQuery

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.scss']
})
export class HomePageComponent implements OnInit, AfterViewInit {
  
  @ViewChild('carousel') _carousel!: ElementRef;

  constructor() { }

  ngOnInit(): void {
  }

  ngAfterViewInit() {
    const carouselElem = this._carousel?.nativeElement;
    const carousel = $(carouselElem).carousel();
  }

}

在你的html文件中添加#carousel，

<div #carousel id="carousel-example" class="carousel slide carousel-fade" data-interval="3000" data-ride="carousel">
  ...

如果您使用的是 Bootstrap V5，

<div #carousel id="carousel-example" class="carousel slide carousel-fade" data-bs-interval="3000" data-bs-ride="carousel">
  ...

【讨论】：