jquery - 为什么我的 bootstrap 轮播不能正常工作？

Question

我已经使用 npm install jquery --save 和 npm install bootstrap --save 安装了 jquery 和 bootrap，它们位于 node_modules。我将脚本添加到 "scripts" 下的 angular.json 文件中，如下所示:

"scripts": [
        "node_modules/jquery/dist/jquery.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
      ]

这是我的 component.html 文件:

<div  class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="assets/grey.jpg" alt="First slide">
        <div class="carousel-caption d-none d-md-block">
          <h1>Example headline.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="assets/grey.jpg" alt="Second slide">
        <div class="carousel-caption d-none d-md-block">
          <h1>Another example headline.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="assets/grey.jpg" alt="Third slide">
        <div class="carousel-caption d-none d-md-block">
          <h1>One more for good measure.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
            </p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

这是我的 component.ts 文件:

import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit(): void {
  }

}

编辑:现在我已经将 Bootstrap 添加到 scripts 下的 angular.json 文件中以及下面 Raj 的建议，但它仍然无法正常工作。

"styles": [
              "node_modules/bootstrap/dist/scss/bootstrap.scss",
              "src/styles.scss"
]

Answer 1

使用boostrap v4.0.0，在v4.1.0之后carousel在很多浏览器上都无法使用，即使是官方的demo page也可以'工作。

安装并导入 angular.json。

npm install bootstrap@4.0.0 jquery@3.3.1 --save

"styles": [
 "node_modules/bootstrap/dist/scss/bootstrap.scss",
 "src/styles.scss"
]

"scripts": [
 "node_modules/jquery/dist/jquery.min.js",
 "node_modules/bootstrap/dist/js/bootstrap.min.js"
]