Question

我的component.html页面之一中有一个轮播，并且我尝试在轮播更改幻灯片时更改其下方的一些相关内容。我在关联的component.ts文件中使用jQuery，但是我不知道如何在转盘滑动时注意到它。我尝试使用slide.bs.carousel，但似乎没有注意到。 HTML：

<div id="projectCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#projectCarousel" data-slide-to="0" class="active"> 
        </li>
        <li data-target="#projectCarousel" data-slide-to="1"></li>
        <li data-target="#projectCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class = "carousel-item active">
            <img class="d-block rounded mx-auto" src="/assets/images/spiritgardener.jpg" alt="Spirit Gardener - Turn Based Strategy">
        </div>
        <div class = "carousel-item">
            <img class="d-block rounded mx-auto" src="/assets/images/spooky.png" alt="Spooky the Scared Ghost - Ludum Dare Challenge">
        </div>
        <div class = "carousel-item">
            <img class="d-block rounded mx-auto" src="/assets/images/petshelter.png" alt="Pet Shelter - 5 Hour Full MEAN">
        </div>
    </div>
    <a class="carousel-control-prev" href="#projectCarousel" 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="#projectCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
    </a>
</div>
<div id="projectcontent">
    <h1 id="projectname">Sample Project Name</h1>
    <p id="projectdescription">Sample description</p>
</div>

Typescript / jQuery：

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

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

  constructor() { }

  ngOnInit() {
    $(document).ready(function(){
        $(".carousel").on("slide.bs.carousel", function(){
            alert("Sliding!");
            $("#projectname").text($(".active > img").attr("alt"));
        });

        $("#projectname").text($(".active > img").attr("alt"));

    });
  }
}

$("#projectname").text($(".active > img").attr("alt"));行本身可以按预期工作，但是当我尝试将其放入$(".carousel").on("slide.bs.carousel", function(){时，似乎没有引起注意。我试图在其中放置警报和东西，通过其ID定位轮播，等等……无济于事。

如果有人有解决方案，将不胜感激！

Bootstrap 4传送带滑动（在Angular中）时如何更改内容？

0 个答案: