引导 4 轮播在 Angular 2 中工作？错误：类型 'JQuery' 上不存在属性'carousel'

我正在尝试在我的 Angular 2 应用程序中使用 Bootstrap 4 轮播。具体来说，我正在尝试复制这里完成的全宽效果。我走到了最后一点，我必须将元素挂到轮播：

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

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

错误：类型"JQuery"上不存在属性"轮播">

我知道有 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>

这是我的索引.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 步。确保你有jQuery和Bootstrap.js在angular-cli.json的脚本部分提到

"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
    });
}

我希望这有效。

我遇到了同样的问题，并且能够通过更改来解决它

import * as $ from 'jquery';

自

declare var jQuery: any;

看起来第一个创建了jQuery的新实例;而第二个访问了获得引导函数(轮播，模态...等(附在它上面。您可以通过在组件类中添加以下内容并在上面提到的两个 import 语句之间切换来确认这一点。

console.log($.fn.carousel);
console.log($.fn.modal);

详细了解声明关键字："声明"在"导出声明类操作"中有什么作用？

关于 TypeScript 导入语句：https://www.typescriptlang.org/docs/handbook/modules.html

您的问题是您没有导入引导程序或没有正确导入它。在你的索引中.html确保在jQuery之后导入引导程序，如下所示：

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"></script>

不是，您应该能够使用轮播。

相关内容

最新更新

热门标签：