个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 16:15:53 26 4
gpt4 key购买 nike

我正在尝试让 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
    });
}

我希望这行得通。

关于angular - Bootstrap 4 Carousel 在 Angular 2 中工作？错误 : Property 'carousel' does not exist on type 'JQuery' ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42119779/

26 4 0
文章推荐： ios - NSNotificationCenter-未调用观察者选择器
文章推荐： google-maps - 将 GIcon() 用于谷歌地图时出现问题
文章推荐： ruby-on-rails - 为什么我的 Ember-Rails "Hello World"应用程序不工作？
文章推荐： r - 将 data.table 语法转换为 dplyr 语法
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com