javascript - 为什么未在Angular中加载flickity CSS？

因此，我尝试将flickity轮播添加到我的Angular应用中。我认为从技术上讲它应该可以正常工作，导致它无法按应有的方式工作的问题是，flickity.css中的css似乎都没有加载。我希望有人可能会知道为什么会这样。

我通过运行flickity将npm install 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，这意味着轻拂视口，按钮等中的所有内容。因此，整个操作将无法正常进行。

最佳答案

您需要像这样将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中

关于javascript - 为什么未在Angular中加载flickity CSS？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60067691/