旋转木马滑块按钮在 Angular 7 中不起作用答案

【问题标题】：Carousel slider button does not work in Angular 7旋转木马滑块按钮在 Angular 7 中不起作用
【发布时间】：2019-07-30 13:23:20
【问题描述】：

我用引导轮播写了一段简单的html代码

<!--The content below is only a placeholder and can be replaced.-->
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="http://10.23.129.132:1313/a.jpg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="http://10.23.129.132:1313/b.jpg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="http://10.23.129.132:1313/c.jpg" class="d-block w-100" alt="...">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
<router-outlet></router-outlet>

如果我将其作为简单的 html 代码运行，则轮播通常会显示图像以及滑块功能，但如果我尝试使用 Angular 进行编译，则只会显示图像。如果我单击滑块按钮，它不会更改图像。我检查了图像是否存在，如果我将鼠标悬停在链接上，它们是否存在并显示出来。只是滑块不起作用。

这是 angular.json 文件

"styles": [
              "../node_modules/bootstrap/dist/css/bootstrap.min.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"
            ]

这是 app.module.ts

import { AlertModule } from 'ngx-bootstrap';
import {NgxPopperModule} from 'ngx-popper';
import { CarouselComponent } from 'ngx-bootstrap';

 imports: [
    NgxPopperModule,
    CarouselComponent,
    ...
  ]

我确实使用 npm 安装了所有组件。

【问题讨论】：

您的意思是当您构建解决方案时，轮播不再滑动？控制台上有什么？
是的，旋转木马不滑动。以下是唯一的控制台文本： Angular 正在开发模式下运行。调用 enableProdMode() 以启用生产模式。客户端：52 [WDS] 启用实时重新加载。
我在考虑是否没有正确导入项目。打字稿导入是否正确？
刚刚看到...不要使用 jQuery... 而是使用 ng-bootstrap.github.io/#/components/carousel/examples 或 valor-software.com/ngx-bootstrap/#/carousel
@AkberIqbal 我无法使 ng-bootstrap 工作，但 ngx-bootstrap 工作。请输入它作为答案。我会将其标记为答案。

标签： jquery html angular bootstrap-4

【解决方案1】：

不要使用 jQuery... 而是使用 valor-software.com/ngx-bootstrap/#/carousel