无法以角度 4 加载 slick-carousel：无法加载 css答案

【问题标题】：Cannot load slick-carousel in angular 4 : Cannot load css无法以角度 4 加载 slick-carousel：无法加载 css
【发布时间】：2020-01-23 12:50:06
【问题描述】：

我在 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"

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

【问题讨论】：

只是补充一下，我尝试在 ngOnInit() 和 constructor() 中添加代码来初始化轮播

标签： javascript jquery css angular

【解决方案1】：

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

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

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

【讨论】：

这不是答案，像这样的句子请使用 cmets
我已经检查过我能够获取数据，但是整个轮播中断，所有项目都在一条垂直线上。
您可以尝试在您的 angular-cli 中包含 css <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css" />。告诉我
我尝试在 angular-cli 中同时包含脚本和 css，但它看起来不起作用。
这里 try 尝试为您的 init() 添加超时 setTimeout(() => { }, 1000); 在 Angular js 版本中，它按照 Nick njj 的建议工作。

【解决方案2】：

在 angular.json 中有一个类似的部分：

"styles": [
    "//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css",
  ],

或者如果你想添加你的 src/style.css

@import "//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css";

另一方面，我在 stackBlitz 上找到了一个工作示例 example

【讨论】：