Bootstrap 4 Carousel在Angular 2中工作?错误:'JQuery'类型中不存在属性'carousel'

时间:2017-02-08 17:27:35

标签: angular carousel bootstrap-4

我正在尝试使用我的Angular 2应用程序中的Bootstrap 4轮播。具体来说,我正在尝试复制完成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>

感谢您的帮助!

4 个答案:

答案 0 :(得分:3)

步骤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
    });
}

我希望这有效。

答案 1 :(得分:0)

您的问题是您没有导入引导程序,或者您没有正确导入它。在index.html中,请确保在jQuery之后导入bootstrap,如下所示:

<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>

不是你应该可以使用旋转木马。

答案 2 :(得分:0)

我现在遇到同样的问题,试图在我的应用上发生这种情况:

https://www.bootply.com/89193

$(&#39; .carousel&#39;)。carousel({//&lt; - ERROR在.carousel上

这是我的index.html的样子:

    <html>
<head>
    <meta charset="utf-8">
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <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://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <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">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
</head>
<body>
    <app-root>
        <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
        </div>
    </app-root>
</body>
</html>

我认为我有正确的bootstrap和jquery

答案 3 :(得分:0)

我遇到了同样的问题,并且可以通过更改

来解决它
import * as $ from 'jquery';

declare var jQuery: any;

看起来第一个创建jQuery的新实例;然而,第二个访问连接到它的引导函数(轮播,模态等)的全局实例。您可以通过在组件类中添加以下内容并在上述两个import语句之间切换来确认这一点。

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

有关声明关键字的更多信息:What does 'declare' do in 'export declare class Actions'?

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