javascript - 无法以 Angular 4 : Cannot load css 加载圆滑转盘

Question

我在 Angular 4 中使用 slick-carousel slick-carousel

在我的 home.component.html 中

<div class="list-books" *ngIf="results?.length > 0">
  <div class="col-md-3 col-xs-6" *ngFor="let item of results;let i=index">
    <a>
      <div class="mt-card-item">
        <div class="mt-card-content">
          <div class="row">
            <div class="col-md-12">
              <span>{{item.Name}}</span>
            </div>
          </div>
          <div class="row" >
            <div class="col-md-12">
              <span>{{item.Address}}</span>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <span class="mt-card-name">{{item.Telephone}}</span>
            </div>
          </div>
        </div>
      </div>
    </a>
  </div>
</div>

在我的 home.component.ts 中

  $('.list-books').slick({
            dots: false,
            infinite: false,
            speed: 300,
            fade: false,
            slidesToShow: 4,
            slidesToScroll: 4,
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 1,
                        infinite: true,
                        dots: true
                    }
                },
                {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
            ]
        });

变量results 保存轮播要填充的数据。当组件加载时，我可以看到数据但无法加载 css 并破坏了 UI。看起来数据是第一位的，但无法加载 css 无法弄清楚

我还在 index.html 中添加了 css，在 angular.json 中添加了 slick.min.js

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css" />

 "node_modules/slick-carousel/slick/slick.min.js"

关于可以做什么的任何想法。任何帮助将不胜感激。

Answer 1

在这里try尝试为您的 init() 添加超时

setTimeout(() => { //you slick-carousel init code }, 1000); 

在 Angular js 版本中，它按照 Nick njj 的建议工作