在 angular 中路由返回时，引导轮播不会自动滑动？

Question

问题是当我启动我的 angular 应用程序时，使用引导轮播的图像 slider 工作正常。 但是当我路由到另一个视图并返回到图像 slider 视图时，它不是自动滑动的，我也可以使用下一个和上一个按钮来更改图像，但它不是自动滑动的。 它仅在我重新加载页面时才有效。 如何解决这个问题？

这是我的代码

.html文件

    <div id="myCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-pause="false">
    
      <!-- CAROUSEL INDICATORS -->
      <div class="carousel-indicators">
        <div *ngFor="let image of images;index as i;first as isFirst" [class.active]="isFirst">
          <button type="button" data-bs-target="#myCarousel" [attr.data-bs-slide-to]="i" aria-current="true">
          </button>
        </div>
      </div>
      
      <!-- CAROUSEL IMAGES -->
      <div class="carousel-inner">
        <div class="carousel-item active" data-bs-interval="2000" *ngFor="let image of images;first as isFirst" [class.active]="isFirst">
          <img id="carouselImage" src="{{image}}" class="d-block w-100" height="707vh" alt="">
          <div class="carousel-caption d-none d-md-block">
            <h3>It Differentiates Your Brand From Others</h3>
            <p>Kajah Industrial is The leading Industrial In The Country.</p>
            <button class="btn" (click)="btnService()">Watch Our Services</button>
          </div>
        </div>
      </div>
    
      <!-- NEXT AND PREV BUTTON -->
      <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel"  data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#myCarousel"  data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>

.ts 文件

import { bootstrap } from 'bootstrap';
...
 ngOnInit() {
    var myCarousel = document.querySelector('#myCarousel')
    var carousel = new bootstrap.Carousel(myCarousel)
  }

angular.json文件

 "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/font-awesome/css/font-awesome.min.css",
              "./node_modules/aos/dist/aos.css",
              "src/styles.css"
            ],
 "scripts": ["./node_modules/jquery/dist/jquery.min.js",
             "./node_modules/popper.js/dist/umd/popper.min.js",
             "./node_modules/bootstrap/dist/js/bootstrap.min.js",
             "./node_modules/aos/dist/aos.js"
            ]

而且我在控制台中发现了这个错误

*错误类型错误：无法读取 HomeComponent.ngOnInit 未定义的属性“轮播”*

Answer 1

有几件事需要考虑。 您可以添加declare var $: any; 在.ts文件中的import语句下。 这将允许您访问jQuery中的 jQuery，它由引导轮播使用。

您不应尝试在ngOnInit方法中初始化轮播，而应使用ngAfterContentInit 。 ngOnInit在视图呈现之前触发，因此您的查询选择器找不到该组件，因为 Angular 尚未将其添加到 DOM。

您可以在此处阅读有关 Angular 生命周期挂钩的信息。

ngAfterContentInit

在 Angular 将外部内容投影到组件的视图或指令所在的视图后响应。

ngAfterContentInit() {
  const myCarousel = document.querySelector('#myCarousel');
  const carousel = $(myCarousel).carousel();
}

此外，您应该使用ViewChild来引用控件，而不是使用document.querySelector作为 Angular 访问 DOM 元素的首选方式。

declare var $: any;

ViewChild('carousel', { static: false }) private _carousel: ElementRef;

ngAfterContentInit() {
   const myCarousel = this._carousel.nativeElement;
   const carousel = $(myCarousel).carousel();
}

在您的 html 添加#carousel

<div #carousel id="myCarousel" class="carousel slide carousel-fade"