angular之Bootstrap 4 Carousel 在 Angular 2 中工作错误 : Property 'carousel' does not exist on type 'JQuery'

shihaiming 阅读：61 2025-05-04 20:05:19 评论：0

我正在尝试让 Bootstrap 4 轮播在我的 Angular 2 应用程序中工作。具体来说，我正在尝试复制完成的全 Angular 效果 here .我已经到了最后一点，我必须将元素卡在轮播上:

$('.carousel').carousel({ 
  interval: 6000, 
  pause: "false" 
});

当我尝试编译时，出现以下错误:

错误:“JQuery”类型上不存在属性“carousel”

我知道有 ng-bootstrap组件，但我无法以这种方式让那里的轮播完全全宽。

这是我的代码(Typescript、CSS、HTML):

import { Component, OnInit } from '@angular/core'; 
import * as $ from 'jquery'; 
 
@Component({ 
  selector: 'app-home-carousel', 
  templateUrl: './home-carousel.component.html', 
  styleUrls: ['./home-carousel.component.css'] 
}) 
export class HomeCarouselComponent implements OnInit { 
 
  constructor() { } 
 
  ngOnInit() { 
  } 
 
  setupCarousel(): void { 
    var $item = $('.carousel .item');  
    var $wHeight = $(window).height(); 
    $item.eq(0).addClass('active'); 
    $item.height('400px');  
    $item.addClass('full-screen'); 
 
    $('.carousel img').each(function() { 
      var $src = $(this).attr('src'); 
      var $color = $(this).attr('data-color'); 
      $(this).parent().css({ 
        'background-image' : 'url(' + $src + ')', 
        'background-color' : $color 
      }); 
      $(this).remove(); 
    }); 
 
    $(window).on('resize', function (){ 
      $wHeight = $(window).height(); 
      $item.height($wHeight); 
    }); 
 
    $('.carousel').carousel({  // <-- ERROR is on the .carousel 
      interval: 6000, 
      pause: "false" 
    });     
  } 
}

h3 { 
  display: inline-block; 
  padding: 10px; 
} 
 
.full-screen { 
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat; 
  height: 300px; 
}

<div id="mycarousel" class="carousel slide" data-ride="carousel"> 
  <!-- Indicators --> 
  <ol class="carousel-indicators"> 
    <li data-target="#mycarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#mycarousel" data-slide-to="1"></li> 
    <li data-target="#mycarousel" data-slide-to="2"></li> 
    <li data-target="#mycarousel" data-slide-to="3"></li> 
    <li data-target="#mycarousel" data-slide-to="4"></li> 
  </ol> 
 
  <!-- Wrapper for slides --> 
  <div class="carousel-inner" role="listbox"> 
    <div class="item"> 
        <img src="https://unsplash.it/2000/1250?image=397" data-color="lightblue" alt="First Image"> 
        <div class="carousel-caption"> 
            <h3>First Image</h3> 
        </div> 
    </div> 
    <div class="item"> 
        <img src="https://unsplash.it/2000/1250?image=689" data-color="firebrick" alt="Second Image"> 
        <div class="carousel-caption"> 
            <h3>Second Image</h3> 
        </div> 
    </div> 
    <div class="item"> 
        <img src="https://unsplash.it/2000/1250?image=675" data-color="violet" alt="Third Image"> 
        <div class="carousel-caption"> 
            <h3>Third Image</h3> 
        </div> 
    </div> 
    <div class="item"> 
        <img src="https://unsplash.it/2000/1250?image=658" data-color="lightgreen" alt="Fourth Image"> 
        <div class="carousel-caption"> 
            <h3>Fourth Image</h3> 
        </div> 
    </div> 
    <div class="item"> 
        <img src="https://unsplash.it/2000/1250?image=638" data-color="tomato" alt="Fifth Image"> 
        <div class="carousel-caption"> 
            <h3>Fifth Image</h3> 
        </div> 
    </div> 
  </div> 
 
  <!-- Controls --> 
  <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
  </a> 
  <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
  </a> 
</div>

这是我的 index.html 文件:

<!doctype html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <title>Website</title> 
  <base href="/"> 
 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" 
        integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
  <link rel="icon" type="image/x-icon" href="favicon.ico"> 
</head> 
<body> 
  <div class="my-fluid-container"> 
    <div class="row"> 
      <div class="col-md-12 app-container"> 
        <app-root>Loading...</app-root> 
      </div> 
    </div> 
  </div> 
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script> 
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" 
          integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" 
          integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" 
          integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
</body> 
</html>

感谢您的帮助!

请您参考如下方法:

第 1 步。确保在 angular-cli.json 的脚本部分中提到了 jQuery 和 Bootstrap.js

"scripts": [ 
            "../node_modules/jquery/dist/jquery.min.js", 
            "../node_modules/bootstrap/dist/js/bootstrap.min.js" 
        ]

第 2 步。在您的 home-carousel.component.ts 中 import { Component, OnInit } from '@angular/core'; 添加 declare var $:any; 像这样:

import { Component, OnInit } from '@angular/core'; 
declare var $:any;

第 3 步。虽然不是强制性的，但我发现像这样将 jQuery 和 JS 代码放在 ngOnInit() 中更安全:

ngOnInit() { 
    $('.carousel').carousel({ 
        interval: 2000 
    }); 
}

我希望这行得通。

标签:jquery

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。