时间戳

首页 > 解决方案 > 旋转木马滑块按钮在 Angular 7 中不起作用

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

问题描述

我用引导轮播写了一段简单的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 安装了所有组件。

标签： jqueryhtmlangularbootstrap-4

解决方案

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

相关的 HTML

<carousel>
  <slide>
    <img src="assets/images/nature/1.jpg" alt="first slide" style="display: block; width: 100%;">
  </slide>
  <slide>
    <img src="assets/images/nature/2.jpg" alt="second slide" style="display: block; width: 100%;">
  </slide>
  <slide>
    <img src="assets/images/nature/3.jpg" alt="third slide" style="display: block; width: 100%;">
  </slide>
</carousel>

相关TS

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

@Component({
  selector: 'demo-carousel-basic',
  templateUrl: './basic.html'
})
export class DemoCarouseBasicComponent {}

来自 ngx-bootstrap 站点的工作示例

推荐阅读