Question

刚开始使用

我已经在节点模块中下载了平滑传送带
在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插件。最好尝试获得特定于角度的转盘或静止转盘。如果要使用转盘，请在底部的 index.html 文件中编写jQuery代码，并在 main.ts中包含以下行文件。

main.ts

onAddBet(form: NgForm) {
    console.log(form.value);
    if (form.invalid) return;
    form.resetForm();
}

Answer 2

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

在此处查看演示

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

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

如何为特定组件加载光滑轮播文件

2 个答案: