Javascript 引导转盘在按角度向后布线时不会自动滑动？

问题是，当我启动角度应用程序时，使用引导转盘的图像滑块工作正常。但是，当我路由到另一个视图并返回到图像滑块视图时，它不是自动滑动的，而且我可以使用“下一步”和“上一步”按钮更改图像，但它不是自动滑动的。它只在我重新加载页面时起作用。如何解决这个问题

这是我的代码

    <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>

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

 "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"
            ]

.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>

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

 "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"
            ]

angular.json文件

    <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>

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

 "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"
            ]

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

    <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>

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

 "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"
            ]

---

*错误类型错误：无法读取属性的“CouSele'”。您可以添加

声明var$：any.ts

文件中的

import

语句下的code>。这将允许您访问引导转盘使用的Angular中的

jQuery

您不应该尝试在

ngOnInit

方法中初始化旋转木马，而应该使用

ngAfterContentInit

ngOnInit

在视图渲染之前激发，因此您的查询选择器无法找到该组件，因为Angular尚未将其添加到DOM中

你可以

ngAfterContentInit

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

您还应该使用

ViewChild

来引用控件，而不是使用

document.querySelector

作为访问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"