jquery - 如何为特定组件加载 slick-carousel 文件

Question

对角度如此陌生，

• 我在节点模块中下载了 slick-carousel
• 在 angular.json 文件中添加了路径
• 当我刷新页面时，滑块正在工作（我认为 js 文件正在正确加载）
• 当我路由到另一个页面并烘焙到同一页面滑块不起作用（我认为 js 没有加载并且 slick.css 也没有加载）
• 在主页加载或刷新页面时，slick.css 加载正常，但是当我路由到另一个页面并返回时，slick.css 文件丢失了

home.component.html

                <ul class="event-list">
                    <li>
                        <time>
                            <span class="day">21</span>
                            <span class="month">june</span>

                        </time>

                        <div class="info">
                            <h6><b>FAREWELL TO MTECH STUDENTS</b></h6>
                            <h6> Farewell to MTech students More Details
                                    </h6>
                            </div>

                        </li>

                    </ul>
                </div>
                <div>
                    <ul class="event-list">
                        <li>
                            <time>
              <span class="day">21</span>
              <span class="month">April</span>

            </time>
            </div>

            </section>

home.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    $(document).on('ready', function() {

      $(".vertical-center-3").slick({
        dots: true,
        vertical: true,
        centerMode: true,
        slidesToShow: 2,
        slidesToScroll: 1,
        autoplay:true,
        autoplaySpeed:2000,
        nextArrow: null ,
        prevArrow:null
      });

      $('.center').slick({
    centerMode: true,
    centerPadding: '60px',
    slidesToShow: 5,
    autoplay:true,
    autoplaySpeed:2000,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 3
        }
      },
      {
        breakpoint: 480,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 1
        }
      }
    ]
  });

    });


  }

}

这是使用 slick-slider 的组件我不熟悉在 .ts 中导入文件并调用该函数请帮帮我

标签： jqueryslick.jsangular8

Answer 1

不建议在 Angular 中使用 jQuery 插件。最好尝试获取任何角度特定的轮播或 Still 如果您想使用它，请在底部的index.html文件中编写 jQuery 代码，并在main.ts文件中包含以下行。

main.ts

declare var $: any;