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

Question

所以我正在尝试将 flickity 轮播整合到我的 Angular 应用程序中。我认为从技术上讲它应该工作正常，阻止它按应有的方式工作的问题是 flickity.css 的 css 的 none 似乎正在加载。我希望有人知道为什么会这样。

我通过运行 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 的 none，这意味着从 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"
]

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

或

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

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

在你的 index.html

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

Why are flickity css not being loaded in Angular?

javascript

css

flickity

angular