为什么没有在 Angular 中加载 flickity css？答案

【问题标题】：Why are flickity css not being loaded in Angular?为什么没有在 Angular 中加载 flickity css？
【发布时间】：2020-02-05 01:04:44
【问题描述】：

所以我试图将flickity carousel 合并到我的 Angular 应用程序中。我认为从技术上讲它应该可以正常工作，阻止它以应有的方式工作的问题是flickity.css 中的任何 css 似乎都没有加载。我希望有人可能知道为什么会这样。

我通过运行npm install flickity 将flickity 添加到我的应用程序中。

此后，在我的component 中，我添加了flickity：

import * as flickity from 'flickity';

接下来我初始化了一切：

  ngOnInit() {
    window.addEventListener("DOMContentLoaded", function() {
      this.carousel = document.querySelector('.container');
      console.log(this.carousel);
      this.flick = new flickity(this.carousel, {
        imagesLoaded: true,
        wrapAround: true
      });

      var imgs = this.carousel.querySelectorAll('.item img');
      console.log(imgs);
      var docStyle = document.documentElement.style;
      var transformProp = typeof docStyle.transform == 'string' ?
        'transform' : 'WebkitTransform';

      this.flick.on('scroll', function() {
        this.flick.slides.forEach(function(slide, i) {
          var img = imgs[i];
          var x = (slide.target + this.flick.x) * -1 / 3;
          img.style[transformProp] = 'translateX(' + x + 'px)';
        });
      });
    });
  }

基本上所有js 似乎都工作正常，但没有呈现固有的flickity，这意味着从轻弹视口、按钮等所有内容。因此整个事情都无法正常工作。

【问题讨论】：

标签： javascript css angular flickity

【解决方案1】：

您需要像这样将flickity css 文件添加到您的 angular.json 导入中

angular.json

// ...
"styles": [
 // path to flickity css
 // I just made this up so you will have to double check the path to the css file
 "node_modules/flickity/dist/flickity.min.css"
]

请注意：添加后您必须重新启动项目才能使更改生效。

或

根据 flickity 文档，您可以只包含这个

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

在你的index.html

【讨论】：