Bootstrap carousel slide.bs.carousel 或 slid.bs.carousel 事件未使用 Angular 触发

Question

我到处检查都没有运气。我正在尝试检测轮播何时更改为新幻灯片（天气自动或通过用户单击）。我试过很多组合都没有运气。该事件根本不会触发。我已经使用事件处理程序 .on 在打字稿文件中附加事件，但它们不会触发。我也尝试过现在已弃用的 .bind ，但没有任何反应。使用 Angular 8.3 引导程序 4.4.1

这是 HTML

<div class="project-container">
<div class="header">
        <h2><i class="fas fa-book"></i>Projects</h2>
    </div>
    <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselIndicators" data-slide-to="1"></li>
            <li data-target="#carouselIndicators" data-slide-to="2"></li>
            <li data-target="#carouselIndicators" data-slide-to="3"></li>
            <li data-target="#carouselIndicators" data-slide-to="4"></li>
            <li data-target="#carouselIndicators" data-slide-to="5"></li>
        </ol>
        <div class="carousel-inner" id="project-carousel">

            <div *ngFor="let project of projects; let i = index" class="carousel-item">
                <div class="project-item">
                    <div class="container">
                        <div class="row">
                            <div class="col left horizontal-scroll-wrapper">
                                <div class="project-image-container">
                                    <div class="row">
                                        <div *ngFor="let image of project.images">
                                            <div class="col">
                                                <img [src]="image.src">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col right">
                                <div class="project-details-container">
                                    <h1>{{ project.name }}</h1>
                                    <h3>Language: {{ project.language }}</h3>
                                    <h3>Created: {{ project.date }}</h3>
                                    <p>{{ project.description }}</p>
                                    <a [href]="project.link" target="_blank">{{ project.linkDescription }}</a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
        <a class="carousel-control-prev" href="#carouselIndicators" 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="#carouselIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

还有打字稿

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';

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

  projects = new Array();

  constructor() { }

  ngOnInit() {
    this.projects = [{....}];

  }

  ngAfterViewInit() {

    document.getElementById("project-carousel").children[0].classList.add("active");

    [].map.call(
      document.querySelectorAll('.left'),
      ((slider: HTMLElement) => {

        slider.addEventListener('mouseenter', e => {

          var x = window.scrollX;
          var y = window.scrollY;
          window.onscroll = function () { window.scrollTo(x, y); };

        });

        slider.addEventListener('mouseleave', e => {

          window.onscroll = function () { };

        });

        let scrollDirection;
        let scrollAmount = 0;

        slider.addEventListener('wheel', (e) => {

          scrollDirection = e.deltaY;

          if (scrollDirection < 0) {
            scrollAmount = slider.scrollWidth / 8;
            slider.scrollLeft -= scrollAmount;
          } else {
            scrollAmount = slider.scrollWidth / 8;
            slider.scrollLeft += scrollAmount;
          }

        });
      })
    )
  }

}



$('#carouselIndicators').on('slide.bs.carousel', function () {
  console.log("Slide!"); // This does not fire
})

$('#carouselIndicators').on('slid.bs.carousel', function () {
  console.log("Slid!"); // This does not fire
})

Answer 1

有几种不同的方法可以做到这一点，但以下方法对我来说效果很好：

首先运行以下命令添加引导轮播环境：

ng add ngx-bootstrap  --component carousel

然后是 app.module.ts：

//import CarouselModule at the top and in imports of app.module.ts include CarouselModule
import { CarouselModule } from 'ngx-bootstrap/carousel';
//in imports of app.module.ts include this:
imports: [
    BrowserModule,
    CarouselModule.forRoot()
  ],

在 app.component.ts 中添加以下内容

import { Component } from '@angular/core';
import { CarouselConfig } from 'ngx-bootstrap/carousel';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [
    { provide: CarouselConfig, useValue: { interval: 1500, noPause: true, showIndicators: true } }
  ]
})
export class AppComponent {
  title = 'testfunctions';
  
}

最后，app component.html 文件：

<carousel>
  <slide>
    <img src="image1.jpg" alt="first slide" style="display: block; width: 100%;">
    <div class="carousel-caption d-none d-md-block">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </slide>
  <slide>
    <img src="image2.jpg" alt="second slide" style="display: block; width: 100%;">
    <div class="carousel-caption d-none d-md-block">
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </slide>
  <slide>
    <img src="image3.jpg" alt="third slide" style="display: block; width: 100%;">
    <div class="carousel-caption d-none d-md-block">
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </slide>