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

Question

对 angular、

如此陌生

我在节点模块中下载了 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 中导入文件和调用函数请帮助我

Answer 1

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

main.ts

declare var $: any;

Answer 2

使用 ngx 有用的 swiper 库它没有 jquery 依赖转到此 link 以获取安装文档 https://www.npmjs.com/package/ngx-useful-swiper

在此处查看演示

http://idangero.us/swiper/demos/

并将 Swiper 组件的配置作为对象传递

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

how to load slick-carousel file for specific component

jquery

slick.js

angular8