为什么不在Angular中加载flickity css？

Question

所以我试图将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，这意味着轻拂视口，按钮等的所有内容，因此整个操作将无法正常工作。

Answer 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"
]

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

OR

根据flickity文档，您可以只包含此内容

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

在您的index.html中