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

}

编辑：现在，我已将引导程序添加到scripts下的我的angular.json文件中，下面是Raj的建议，但仍然无法正常工作。

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

Answer 1

您还需要在“ styles”标签下的angular.json中添加bootstarp.css

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

Answer 2

我认为最好使用的是angular的NGX-bootstrap组件。

https://valor-software.com/ngx-bootstrap/#/

Answer 3

使用boostrap v4.0.0，在v4.1.0 carousel无法在许多浏览器上运行之后，甚至官方演示页面也无法运行。

安装并导入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"
]

为什么我的自举轮播无法按角度工作？

3 个答案: